PDA

View Full Version : Cross-browser layout help



jakerbug
Dec 22nd, 2008, 05:39 PM
Having sufficiently tortured myself over this for a few days now, I'm resorting to this forum, as I've done before with great success, thanks to all the people how have a better grip on CSS layout than I do:

I need this: http://www.cocre01.com/personal/tester2.html

To act the same way in Firefox that it does in IE. My man loses his head in FF...

Actually, it would be great if there was one content container that spaned the pink, yellow, and greyish-purple containers too... not have the pink one be seperated.

The goal it to be expandable vertically, with the red/yellow piece duplicated as the page expands.

Good luck - I'm sure someone is smarter than I am with the stuff, but this is a pretty tough one, I think...

jerry62704
Dec 22nd, 2008, 05:55 PM
The first problem is the absolute for the containing div. Add a height:100% and the head will appear. Once the height is in, you don't need the absolute. Other problems will jump up, however. To see them clearer, change the 100% to 1000px.

Your DOCTYPE is incomplete.

jakerbug
Dec 22nd, 2008, 06:15 PM
thanks - yeah I tried that before and I saw the other issues it caused and wasn't sure if that was the right way out. I'm wondering if the way I built this will even handle what I'm trying to do or if I need to srcap it an start again. Am I a couple tweaks away from getting it to work, or does it look like it needs a complete overhaul?

jerry62704
Dec 22nd, 2008, 07:53 PM
It wouldn't take long to fix the things I noticed. The way to do it (the easiest in my book) is to add Firebug to Firefox. Both are free and after a short (1/2 hour) learning curve you will function in Firebug. With it you can change thing to see what will work without having to actually change the code or re-upload the page. But note what you change as it is temporary and will have to be physically applied to the original source.

Most of the problems deal with floats. As with many things, less is more. For example, two divs can be side by side and only one is floated. The other is positioned with margins. The purpose of a float is to have that side by side behavior (including having text float around an image).

Excavator
Dec 22nd, 2008, 08:48 PM
Hello jakerbug,
I'm not sure why the slices. What is the point of http://www.cocre01.com/personal/phototopbar.jpg

It would be much easier/better just to put the entire image of the pig in the left column. If you need a light purple???dark pink??? (not a clue what color that is) div in the right column then you can easily make one.

Excavator
Dec 22nd, 2008, 09:37 PM
I always like to attach the CSS so the entire code/CSS can be posted all together in these forum.
Then, when I use something on an actual website, I use a linked CSS file.

I never use inline CSS as it's a pain in the but to debug.

copy/paste this example into a new .html document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
background: #FC9;
}
* { /*zeros out all default margin and padding*/
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 600px;
margin: 50px auto;/*centers #wrap and moves it 50px down*/
overflow: auto; /*clears floats*/
background: #F00 url(sliver.jpg);
}
#header {
height: 100px;
/*removed float:left; ... no need to float something taht is the full width of it's container*/
background: #00F;
}
#menu {
width: 150px;
float: left;
background: #600;
}
.post1, .post2 {
margin: 0 0 0 150px;
padding: 10px;
}
.post1 {
background-color: pink;
}
.post2 {
background: #FF0;
}
.odd_slice {
float: left;
}
img{float:left}/*just to get the slices to sit together*/
#goldenrod, #greenrod {
height: 55px;
margin: 0 0 0 150px;
}
#goldenrod {
background: #C90;
}
#greenrod {
background: #0C0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="menu">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
<!--end menu--></div>
<div class="post1">
<p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</p>
<!--end post1-->
</div>
<div class="post2">
<p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</p>
<!--end post2--></div>
<img src="http://www.cocre01.com/personal/phototopbar.jpg" width="600" height="139" alt="slice" />
<img src="http://www.cocre01.com/personal/photobot.jpg" alt="slice" width="150" height="111" class="odd_slice" />
<div id="goldenrod">goldenrod</div>
<div id="greenrod">greenrod</div>
<!--end wrap--></div>
</body>
</html>

jakerbug
Dec 22nd, 2008, 10:27 PM
Thanks excavator. The goal was to get this layout into css:

http://www.cocre01.com/personal/tester5.html
http://www.cocre01.com/personal/tester6.html

(if it doesn't show up right in FF at first refresh a couple times... that's what I had to do - and if you wanna explain why that would happen to me while you're at it, be my guest...)

I realize that my other example was kinda hard to figure out - that was just my mock-up to try to work out the layout...

Sometimes I go back to difficult layouts that I gave up on and resorted to tables for because of deadlines... I try to sharpen my CSS that way, but sometimes it doesn't turn out so well.

Excavator
Dec 22nd, 2008, 10:35 PM
Ah yes, I see why.
I'm still not sure I would slice it that way, it's broken in IE8, but I see what your doing.

I would have put the picture of the guy(or pig) in the left column and placed the curved graphic in another div and moved it over the picture with negative margins.

I'm don't know which way is better, that's just how I've done it before.

jakerbug
Dec 23rd, 2008, 05:10 AM
i see. i'll take a whack at it that way... those are the things i don't think about - negative margins, etc. I really need to nail down all the intricacies....