12 replies [Last post]
Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Hello All,

It's been a while but I'm having problems with layout in IE, Netscape/Mozilla, and Opera.

Page resides here: http://www.sugarfixdesign.com/testing/index.htm

I've marked the problem sections with borders to show the areas in question. Two images are surrounded by dotted red borders the main body div is surrounded by solid blue and the footer is dashed.

If you view the page in IE 6 Win you'll see basically how I want the page to layout. When it is viewed in NS/Moz and Opera you'll see extra padding on the top and bottom and NS/Moz completely ignores the fact that the images are SUPPOSED to be contained in the body div and floats them over everything...

Though I am pretty sure it is a simple fix (and suspect it has to do with different interpretations of the box model) any help would save my forehead the bruising that often follows situations like these.

Thanks!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 34 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Layouts are breaking, OH MY!

Hi

Actually, no, it's a bug in the Gecko engine that they don't seem to want to fix. Essentially, some div's (floated ones) have holes in the bottom that need plugging.

Add this style to your style sheet:

.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
}
* html .clear{display:none} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/

And change your html to this in the relevent section:

in Mason County offers an assortment of outdoor activities. We
understand that you need to take advantage of any nice weather we get,
ranging from golf to gardening, scuba diving to dirt bike riding, our
area offers it all. If there are any sections that you would like to
see added, click the link below and e-mail us.</p>
<div class="clear">&nbsp;</div>
</div>

Note the new div. The way I coded the style, only Gecko browsers get it.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Thank you Trevor!

Kind of crummy that in trying to get away from proprietary code you still have to play the games from time to time...

Do you have any ideas as to the appearance of extra padding (top and bottom) in the NS/Moz and Opera? Could it be related to what you've already described?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 34 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Layouts are breaking, OH MY!

No the padding isn't that!

It's IE and Gecko playing the 'my way is better than your way' game.

Set:

div,p{margin:0} in your style to level the playing fields in all css styled docs because they have different defaults for these two tags, then make it what you want where you want.

I always put the

div p
clear
and ...

html,body{
  margin:0;
  padding:0;
  border:0;
}
body{
  font-family:verdana,arial,sans-serif;
  font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/}

bits in all my docs as a default to avoid these stupidities. (then set all my font-sizes, margins and padding in ems).

Trevor

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Sorry that this has sat unattended for so long. I was tied up with other clients and couldn't get back to this.

The fixes applied so far have worked but now that everything is mostly squared away the images aren't alligning in IE/NS/Moz...

Opera has it right but I don't know why. Is there something else besides "float: left;" that I need to make them line up?

Thanks!

Link is: sugarfixdesign.com/testing

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 34 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Layouts are breaking, OH MY!

Hi

Long time no speak (if one can be said to speak on a forum) Laughing out loud

I've looked at the page in both IE6 and Opera 7.23 and can't see any difference.

What I can see is that the text flows under the images. If what you want is the two images to the left and the text to the right you need to set up two columns (divs) and float them both. Inside the left one put the two images, so the text is then kept in the right one.

Don't forget to put a clearing div before the end of the right one.

And then the div after these needs to have clear:both in.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Hi Trevor,

I know it's been a while, like I said I wasn't able to get back to this because I was putting out other fires (2 clients and 1 mother-in-law)...

For some reason, I see the images as the top alligned correctly and the bottom one is "getting caught" on the top. The top left of the bottom image is "catching" on the bottom right of the top image. (I hope that makes sense Wink )

Opera is the only one making the text run under. IE is doing the funky "catching corner" thing. I can't imagine a reason you'd see it differently than I am, we're using the same browsers...

Aaron

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Well, now I've gone and broken everything...

http://sugarfix.hawleyphotographic.com/testing/index.htm
http://sugarfix.hawleyphotographic.com/testing/about.htm

I used the div container for the images and a secondary nav menu and now all but IE throw the page copy on the bottom and it won't line up with float commands. ](*,)

Is there another way?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Layouts are breaking, OH MY!

Hi Aaron,
When you have one element floated the next can wrap around it without needing to float.
Take out the float right from pagecopy and it should sit up next to the image.

Hope that helps

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Hi Tony,

I feel kinda dumb now, I tried that, but for some stupid reason only checked the results in IE and didn't even check to see that it fixed it in all browsers... :-({|=

The only other questions I have are:

If i didn't want the text to wrap and wanted it to remain in a static column, how would I accomplish that without the float that made it all fall to the bottom?

On the sugarfixdesign.com/testing/about.htm how can I get the navbox to always take up 100% of the height (I tried 100% to no avial)?

Thanks,

Aaron

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Layouts are breaking, OH MY!

Hi Aaron,
You would have to set the width of the box containing the text so that it will fit beside the other box when floated.
This can be tricky when you have a fixed width element such as an image and variable width viewpoints.

By the way where are the images?

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

Thanks Tony!

If you're asking about were the pictures were taken, they're both taken around the Hood Canal and Olympic Mountains. Both of which are right next to (due west of) Seattle, Washington. I'm kind of sad I can't take credit for them, they were taken by the client... Wink

Aaron

Aaron
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Layouts are breaking, OH MY!

BTW, Almost forgot!

Any ideas about making the navbox fit to 100% height so it will always be the same height as the text?

Thanks again to all!

Aaron