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

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?

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

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

Hi

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

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

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 )

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

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?

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

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

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?

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...

Aaron

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