[Neil Harding]

Hi,

I'm doing my nut in here, why is i do a layout in CSS as i'm moving away from tables and trying to get into the 21st C, but finiding SO Hard to get a simple layout design to work!

More of a rant than a question.

I have attached the layout i'm trying to get at. Of course the colours on the Div's are only to show you the layout. The red glow needs to go around the menu, content and footer only.


Any help tips on getting something like this working in IE and FF??

Attached File(s)

•  layout.jpg (75.08K)
  Number of downloads: 6

[Mesa]

All browsers render differently, IE is the bain of a designers life sometimes. There are loads of "hacks" you can learn but I found (find) the hardest bit is knowing them in the 1st place.

It could be a double margin bug in IE, are you using floated elements? We really need more info.

[Rachael]

http://blog.html.it/layoutgala/ ?

[gav]

if you code the site properly, there is no need for any "hacks"

[Mesa]

gav, on Jul 31 2008, 21:11, said:

if you code the site properly, there is no need for any "hacks"

Disagree if IE (for example) conformed to stricter ACID testing and complied to standards better then you wouldn't need to "dumb down" your design so it renders properly on ALL browsers. Likewise if people upgraded their browser to the latest versions.

[gdehms]

This is a pretty simple layout. But copying code from a website won't help unless you understand the code.

Around all of the separate divs you have (header, you are here, menu, content, and footer), you will want to have a 'wrapper' div. Why wrapper? Because it wraps around everything. Give the wrapper div a width, which will be the width throughout. Make the wrapper's margins on the left and on the right auto to get it centered.

Because the header and everything else are going to be separate, I would put another div around everything else, so you can give it a separate background from the header div.

In the everything else div, you will have four divs (you can probably use less, but this is just what i do).

For the you are here bar, just give it a height and I think you will be ok.

For the menu, give it a width and float it left. Give content the menu's width subtracted from the wrapper's width. Float left (This way if you want to add another column, you just add it and float it, and it will pretty much work off that bat).

Then for the footer, you will want to give it 'clear:both' and of course a height. This will make sure that it is clear from both the menu and the content divs, because they are floated.

That's the general idea, I think. Feel free to correct anything that seems wrong. This should work for all browsers.

Edit: If you do encounter IE 6 or 7 problems, make a separate css file called 'iestyle.css' or something. Here's how you put it in the html:

	<link href="style.css" rel="stylesheet" type="text/css" />
	<!--[if IE 6]><link href="iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
	<!--[if IE 7]><link href="ie7style.css" rel="stylesheet" type="text/css" /><![endif]-->

This way you only have to put the changes you want to make for Internet Explorer in their specific css file (all the other stuff that will be kept the same doesn't need to be in the ie style). This is because all the normal css is loaded first (style.css), and then the specifics are overridden if it is internet explorer 6 or 7. No hacks, just extra style sheets.

[Neil Harding]

Mesa, on Jul 31 2008, 21:05, said:

All browsers render differently, IE is the bain of a designers life sometimes. There are loads of "hacks" you can learn but I found (find) the hardest bit is knowing them in the 1st place.

It could be a double margin bug in IE, are you using floated elements? We really need more info.

Yeah i have been using floats but it just doesn't work. I've wiped the slate clean and going to start recoding tomorrow and will post the resaults.

[ElanMan]

As a very rough and ready example, take a look at this.
I couldn't be arsed to mess about with a gradient glow but hopefully you get the idea.
The layout itself is very straightforward.
I've had to put a defined height on the divs to give you an idea of the layout.
There are lots of threads on the forum about shadow/glow effects on divs so have a little search about and I'm sure you'll find something to help you.
This basic layout shouldn't need any hacks for any browser.
Hope that helps

[shubox]

gav, on Jul 31 2008, 21:11, said:

if you code the site properly, there is no need for any "hacks"

It depends how you define 'hack'. But IE6 will often require extra conditional css in order to mimic the expected layout of a perfectly marked-up web page. It's a non-standards compliant web browser and as such requires 'hacks'.

[Mesa]

shubox, on Aug 1 2008, 00:11, said:

It depends how you define 'hack'. But IE6 will often require extra conditional css in order to mimic the expected layout of a perfectly marked-up web page. It's a non-standards compliant web browser and as such requires 'hacks'.

Agreed. Should be a required update pushed on all redundant browser users.

[Neil Harding]

I think i'm getting it. Don't use IE lol.

Will take all on board and give it a go today at somepoint.

[Rachael]

Quote

But IE6 will often require extra conditional css in order to mimic the expected layout of a perfectly marked-up web page.

Depends on what sort of layout. A simple two / three column one shouldn't be a problem. I've been marking up websites for over two years and only needed to use a conditional stylesheet *once*.

[Neil Harding]

So i've done a rework and 99% got it working.

The problem i now have is the layout is working in IE7 but not in FF2 the code i'm using is below.

Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{sitename}</title>

{stylesheet}
</head>

<body>
<!-- Start Wrapper for overall site -->
<div id="wrapper">

<!-- Start Header -->
<div id="header">
<img src="uploads/images/logo.jpg" /></div> 
<!-- End Header -->

<!-- Start Strip Div - For Your are here code -->
<div id="strip">
Your are here code
</div><!-- End strip Div -->


<!-- Start Container this is for glow image -->
<div id="container">

<!-- Start Menu Div -->
<div id="menu">
This will be the menu
</div><!-- End Menu Div -->

<!-- Start Content -->
<div id="content">
{content}
</div><!-- End Content Div -->

</div> <!-- End Container Div -->

<!-- Start Footer Div -->
<div id="footer">
{global_content name='footer'}
</div><!-- End Footer Div -->

</div> <!-- End wrapper for whole site -->


</body>
</html>

And here is the CSS

* {
padding: 0;
margin: 0;
}

body {
background: #FFFFCC;
}


#wrapper {
width: 944px;
margin: auto;
}


#header {
width: 944px;
height: 80px;
text-align: center;
background: #FFFFFF;
}


#strip {
width: 919px;
height: 35px;
padding-top: 25px;
padding-left: 25px;
background-image: url(uploads/background/top.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#container {
width: 944px;
height: inherit;
background-image: url(uploads/background/filler.jpg);
background-repeat: repeat-y;
background-position: center;
}


#menu {
background: #FFFFFF;
margin-left: 25px;
width: 150px;
float: left;
}


#content {
background: #FFFFFF;
margin-left: 15px;
width: 730px;
float: left;
}

#footer {
padding-top: 15px;
clear: both;
width: 944px;
height: 70px;
text-align: center;
background-image: url(uploads/background/bottom.jpg);
background-repeat: no-repeat;
background-position: bottom center;
}

[ElanMan]

Neil, have you seen the example that I linked to above?
If you view the source code and css it has everything you need for the basic layout.

[Neil Harding]

Hi ElanMan,

Yeah i did have a look but tried to see if i could get it working myself so i could understand what's going on.

I just don't get why my code works in IE but not in FF. I'll have another look at your code and see what happens.

[k9ruby]

Urrgh! I know!

I tested my IT coursework in firefox and IE. In FF it looked perfect but IE made it look scew whiff...

[Sussex_Chris]

I didn't realise there was a difference when designing my www.gimme4free.net website as I designed it in IE7.
Once the website was live I asked on this forum if people liked it and I was getting replies like it looks crap and I can't read the text, I then opened it in firefox and realised that it was completly buggered!!!

I think IE7 fixes CSS problems as it loads a page, I'm sure Ive been told that on this forum, check my posts and find the CSS help, there will be quite a few answers there.