IE6 driving me mad! 3

[1DMF]

Hello,

I have been working on a redesign of a site to include additonal menus for accessibility etc...

everything looks fine in all other browsers except IE6, the div that should float the text and headings next to the menu and image is dropping down to below them.

Can someone please explain why and what the fix is.

http://dev.justlifecover.co.uk/

also I would like if possible to make the site fluid for varying screen resolutions, what's the best way to approach this and what do I need to change so it still looks ok.

Regards,
1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

I see you have this as your declaration:

#pagebody {
    padding-left:10px;
    float:left;
    width:575px;
}

It's wrapping because you have the specified width on the div and in IE6 the padding is getting added onto the width, so the 585px is too wide and it wraps. That's why it's happening, there are a few ways to fix it. What I would do is not specify a width on #pagebody.


<.

 

[1DMF]

agh yes , not specifying width, only then the <h> tags don't stretch to the full width of the div.

so if I remove the fixed width, how do I then get the <h> tags to fill the width of the div.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

oh and if you take the width off, it then breaks in Opera, FireFox and Safari!

I just can't bloody win! , why won't it be a good little div and just expand to the available space along with everything in it!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

I believe since the header tags are block elements, they will span the length of the container they are in.

So you shouldn't have to do anything.

Plus I already tested it.

<.

 

[monksnake]

You can put this if you feel like it:

*html #pagebody {
    width:565px;
}

<.

 

[1DMF]

nope, take a look , I have removed the width, in firefox/safari/opera it now behaves like IE6 did and in IE7 the <h> tags only expand the width of the content, even if I apply display:block to them!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

You could always put:

#pagebody h2 {
    width: 565px;
}

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

hmm, why does it do this though?

why if no width is applied IE6 actually behaves correctly and all the others break?

how can I get two divs to float side by side in a fluid design?

it doesn't seem possible to please all the browsers and they all behave differently, ither the <h> tag is wrong, or the div's drop down even though they have float on them and should auto fit the available space.

looks like i'll have no choice but to make it a rigid design.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

you see if i'm going to have to fix the <h> tag width I might as well just apply the width to the #pagebody.

why when the containing div has a fixed width the <h> tag fills the space, but if no width is applied to the div, the <h> tag just fills the content with the applied BG imgage.

is this a bug or another one of those by design, i'll never understand!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

I just accept anything that looks funky in IE as a bug. So to fix a bug, sometimes my code doesn't look so nice. That makes me blame my poor coding on Microsoft.


<.

 

[1DMF]

yeah but the fact on this one is removing the width works fine on IE6 but not on the rest - so that doesn't wash for this one i'm afraid

IE7 sort of works but the <H> tag doesn't stretch the full width of the parent <div> and all the others drop the <div> below everything, which must mean if a div doesn't have a fixed width, you cannot float it next to another as it obviously is always 100% width of it's parent <div> , in this case #wrapper

I've given up and gone for the fixed 565 width to the #pagebody, and used the * html IE6 holy hack for the positioning of the menu because of the margin-left seems to be 2px in IE6 and needs 4px in all other browsers to align with the logo.

sometimes I feel like getting a job at Tesco and be done with this headache, but I spose it wouldn't pay anywhere near as much, darn it!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

Well since you said it all worked before in everything except IE6, you should leave your code as it was orginally and do one of the two things posted above, one by me and one by BRPS.

You can put this if you feel like it:

*html #pagebody {
    width:565px;
}

or

You could always put:

#pagebody h2 {
    width: 565px;
}

<.

 

[1DMF]

#pagebody {
    width:565px;
}

does the trick for all of them, ok IE6 has a bigger gap between the two floated divs, but hey too small a hair to bother splitting, but I guess you deserve the star anyhow!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

I'm going to share the love to BillyRay, since he's the one who posted it.

<.

 

[monksnake]

since he's the one who posted it.

Well, he didn't exactly, but neither did I.

Well what you chose to do was a morph between BillyRay's post and mine, so I'll still share the love.

<.

 

[1DMF]

no what I did was exactly what you said reduced the width by the padding because IE6 adds the padding to the container width, which was making it too wide and drop down!

you analysis was correct, I just choose how to fix it ;-)

either way it's not what I want as I hoped for a fluid solution, but that looks like it aint gonna happen!

but of course , spread the love, ahhh , group hug, group hug!





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[monksnake]

I had put the *html up there so it would only affect IE6 and lower.

Not too much group hugging, I'm starting to get scared.

<.

 

[Vragabond]

As for the big margins and IE6 not fitting everything in, you have been hit by the IE Doubled Float-Margin bug.

The other thing, having a floated element without a specified width is a more complex problem. Because floated elements go from having width defaulted to 100%, to auto -- that is, only enough to hold the content that is within them. How this content is defined becomes somewhat of a problem. One could claim that a long string of text in a paragraph is something that will stretch across to the boundaries before it hits the next line. So such a floated element will never fit next to another, because there will simply be too much text inside. Others (other browsers) might interpret it differently. One way or another, you cannot expect anything predictable coming out of such a code, so it should be avoided. If you need fluid layout and floats, you need to go with percentage widths.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

If you need fluid layout and floats, you need to go with percentage widths.

Once again vragabond, thanks for the valuable lesson. Now I see that floated/fluid divs/layouts, must actually be fully qualified in dimension to work as required.

And of course you were right about the double margin IE bug, I tell you what, when it comes to HTML/CSS you really know your sh*t!

All fixed and looking pretty (and the same) in every browser, thanks again o'wise one.

Were not worthy, were not worthy!!!!




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!