15 replies [Last post]
illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Hi guys, I've got something that's really bugging me, and I can't figure out what it is.

Take a look here: http://www.crapfilter.net/blog

I have #navlist inside of #header on this layout, but in Firefox and IE, it appears below it. #header has a background image that should continue behind the navlist. In Firefox and IE you will see red, which is a temporary background color on #content to make the issue more visible.

Strangely enough, it works just fine in Camino. Safari is also fine, but that's to be expected. It also works in Firefox 1.5, which leads me to believe that that Firefox and IE are definitely doing something wrong, not me.

I have a feeling that it's somehow related to floats and clearing them or something, but I'm just not seeing the problem.

If you have a Mac, please take a look in Safari or Camino to see it working correctly.

If you have any other suggestions as to how I can clean things up, please feel free to let me know. This still has a long way to go, so I wouldn't mind hearing about it now, in this early stage.

Thanks!

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Also

I should probably mention that the XHTML 1.1 and CSS both validate just fine.

Does anybody have any leads?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 15 hours ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Tricky issue affecting Firefox, IE

The only elements within #navlist which have content are floated. Block elements won't expand to surround floats without content beyond the float or an overflow setting other than visible.

You can:
- self clear #navlist (or #header), search on clearfix for details.
- set overflow:hidden or overflow:auto on #navlist (or #header).

I can't say why Safari, Camino and FF1.5 do different.

A note on your html. UL is a structural container for a list. Why use a container for the UL? You should be fine with

<ul id='navlist'>
  <li>...</li>
  <li>...</li>
  ...
</ul>

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

Thanks Chris, that worked great. Any ideas about those three boxes I have at the top? They're being pushed 5px to the right in IE and I don't think it's a box model issue, but I could be wrong.

In .promobox, I have padding-left: 5px;. This works fine in everything but IE. In IE, it seems to be doubling it, but only on the first one. If I put it at 0px, there's nothing, which is correct. If I put it at 1px, there's 2, at 2, there's 4 and at 3, there's six. This is pretty odd, at least to me. Any ideas?

.promoitem {
    float: left;
    width: 244px;
    border: 5px solid #fff;
    margin-left: 5px;
    margin-top: 5px;
    background-color: #ccc;
    color: #333;
    height: 100px;
    overflow: hidden;
    }

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 15 hours ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Tricky issue affecting Firefox, IE

IE has another float bug (actually it has lots) - double margin. Google on it for all the details. Solution is normally to set the floated element to display:inline-block. Inline elements ignore horizontal margins, so deftly sidestepping the issue.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Tricky issue affecting Firefox, IE

Simply display:inline; will work and is the normal recommendation. Setting an element to float overrides an elements normal default display and sets it to block, display inline will therefore have no effect on the element but does sort this bug out while honouring margins.

display:inline-table; may cause validation warnings.( unless the validator has finally caught up with it's own specs that is.)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

Thanks guys. I added display: inline; If anybody would be kind enough to check it in IE, that would be cool, since I don't have a PC here at home. Otherwise, I'll check it out in the a.m.

Thanks again!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Tricky issue affecting Firefox, IE

Layout seems the same in FF as in IE.
Please get those images optomized please, you simply can not have header that is 475k or whatever it was , the page is far too slow in rendering and it seemed to delay FF in rendering the smaller images like the orange block(should be a hex background, not image)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

Oh, I definitely intend to get everything optimized asap. I should have probably done that before posting it for review.

For that orange background, I'll sometimes use a solid swatch of color as a background to match things up, especially when I want to have an image match up with a solid background.

None of the web safe oranges was really what i wanted, so i grabbed a color from the orange in the header image and made that orange from there.

It's less than 1k, so it's not really slowing things down too much. Is this a poor practice? If it is, I would definitely like to find a better way.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tricky issue affecting Firefox, IE

I think Hugo means, there's no reason to create a background image if it's just going to be a solid colour. You should just use a hex value which in your case would be #FF9936 for that orange.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 15 hours ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Tricky issue affecting Firefox, IE

illtron wrote:
None of the web safe oranges ...

Websafe colours date back from the times of 256 colour monitors. It is pretty safe to use any colour you want now.

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

Well say If, for example, I want to have a background image that's a gradient that fades into an orange, but the box may stretch. If Windows IE displays that color differently than Safari, it's going to look very awkward.

That's exactly what I'm doing in the main content area. The blue gradient background image fades into the white background color. Since it's white, it'll never be an issue, but if I had some other color, say blue fading into orange, I can't count on that orange being displayed the same on two different computers. There's a very good chance that if I was using a hex value, you'd see an ugly line where the image ended and the background color picked up. When I use an image, I can count on it being the same.

drhowarddrfine
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Tricky issue affecting Firefox, IE

Orange, too, is a hex color. As is red, blue and green. Since virtually all computers aren't restricted anymore to the 256 color palette, the color you choose will be the same except where monitors are different. But then so will your orange or red or blue, etc.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

Yeah, but when I use an orange hex color, that appears to match up fine with the image that's the same color on Safari, chances are really good that they won't match up on a PC running IE. But if I use an image that I know is the same color as another image, it's open to much less interpretation from that PC than the hex color would be.

drhowarddrfine
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Tricky issue affecting Firefox, IE

I'm not sure I understand. If you set a color to #33ff33 you will match that same value/color no matter what image you compare it to if the value of the color in the image is also #33ff33 even if it's on a PC or Mac or whatever.

Now I agree that #33ff33 may look different on a Mac compared to a PC but blending the colors should not be different.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

illtron
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Tricky issue affecting Firefox, IE

In theory, it should work that way, but I've had it not work enough times for me to know that it doesn't always work. I wish it would, but this method is pretty much foolproof.