Help with fixing IE layout

sekhu · 2006-03-17 12:54:37

I only recently checked my site to find that it’s completely tits up on the front page. I’ve only been using FF so it was only brought to my attention when my friend mentioned it. I was wondering if someone could help in finding why this is and how to fix it.

Thanks in advance

Last edited by sekhu (2006-03-17 12:55:49)

whatbrick · 2006-03-17 18:00:36

One thing you can try is removing the width and height from the .rcntbox class. The reason is because the width and height are already set in the #filmrcnt, #musicrcnt, etc… styles. This causes the margin values set in the .rcntbox class to push the containing elements out further, which causes them to drop down like they are in IE. In other words, #filmrcnt, #musicrcnt (et. al) are sticking out about 20px further than they should be.

If you have the web-developer extension for FireFox, turn on the Outline Block Level Elements option and you should see what I mean.

sekhu · 2006-03-18 04:12:32

excellent the containers are in the right place now, however, the excerpt which is in the left containers is still at the bottom of each container causing a great white gap below each row.

whatbrick · 2006-03-18 07:05:36

I didn’t get a chance to look at everything as I was on my way out the door for something, but I’ve looked it over some more and found some things that may help. The margin-left property for the .artimg_1 class is set to 100px. Looks like this value is pushing the img too far to the right in IE and the text next to is dropping below it.

Also, you may want to add a clear: both; to your footer. I didn’t even know that it had a background image until I fiddled with the CSS (that web-developer extension for firefox works wonders).

While looking through the CSS I noticed some things you could do to decrease the filesize of you stylesheet. For instance, you have each container (#filmrcnt, #musicrcnt, #gamercnt, #bookrcnt) as it’s own entry in the stysheet, but they all have the same values. You can combine them all into one entry like so:

<pre><code>
.rcntbox
{background: url(recent.gif) no-repeat;
float: right;
width: 250px;
height: 125px}
</code></pre>

Then use the rcntbox class on every container that holds the recent material. Things like that decrease page weight, which helps speed up loading time.

The same can be done in the page markup as well. I noticed you used a lot of div containers for just about everything. While it works, it isn’t semantically correct and adds some unnecessary weight to the page. Here’s an example:

Original Markup (Taken from the homepage with real content edited out):

<div class=“cerpt”>
<div class=“cerpt_content”>
<div class=“title”><a href=”#” title=“Permanent link to this article”>Link Text</a><br /></div>
<div class=“cerpt_text”><p>Exceprt text.</p></div>
</div>
</div>

</div>

Semantic Markup:

<h3>Film Title</h3>
<p>Film excerpt would go here</p>

</div>

<ul>
<li>Recent Item 1</li>
<li>Recent Item 2</li>
<li>Recent Item 3</li>
<li>Recent Item 4</li>
<li>Recent Item 5</li>
</ul>
</div>

</code>

That is lighter-weight and can be easily understood by text-based browsers, screen-readers, etc.

The CSS for it would look something like this:

<pre><code>
#filmbox
{background: url(filmbg.gif) no-repeat;
float: left;
width: 500px;
height: 125px}

#filmbox img, #musicbox img, #gamebox img, #bookbox img
{margin-left: 50px;}

#filmbox h3, #musicbox h3, #gamebox h3, #bookbox h3
{margin-top: 25px; color: #fff; text-align: center}

#filmbox p, #musicbox p, #gamebox p, #bookbox p
{ blah blah blah}
</code></pre>

I think you get the point.

Sorry for the length on the reply, but you did ask for help. :) Hope some of it was useful.

Last edited by whatbrick (2006-03-18 07:06:33)

felipe808 · 2006-03-20 23:57:13

I’m having a similar problem with my site LEEDerGroup.com under IE. Under FF it looks fine.
Instead of a geen bar with a watermark of LG only a white space shows making it look “tits up”.

Thanks for any light you can shed on this.

Regards, PSW.

felipe808 · 2006-03-20 23:59:33

Actually, under IE it messes up the home page photo/text spacing below as well if you scroll down the page. It must be a css entry.

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-17 12:54:37

Help with fixing IE layout

#2 2006-03-17 18:00:36

Re: Help with fixing IE layout

#3 2006-03-18 04:12:32

Re: Help with fixing IE layout

#4 2006-03-18 07:05:36

Re: Help with fixing IE layout

#5 2006-03-20 23:57:13

Re: Help with fixing IE layout

#6 2006-03-20 23:59:33

Re: Help with fixing IE layout

Board footer