hi all iam learning div layout and i need ur help,

when browse at firefox and ie7 it works but in ie6 i dont know what is the problem ?

i attached my files

html.zip

The CSS box model is broken in IE6 (and IE7 is still pretty bad) because it doesn't comply with W3C Standards.

 

Luckily though you can write a specific stylesheet for IE (or specific versions) by putting this in your head next to your normal stylesheet link:

 

<!--[if lt IE7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->

 

The if lt IE7 is equal to "if the browser is less than IE version 7 (eg. 6 or 5.5) then use this stylesheet". You can change the lt to lte (less than or equal to) or get rid of it entirely (eg. if IE would be "all IE versions"!).

 

This is called a Coditional Stylesheet.

 

You'll have to do a search for what specifically is wrong with your page in IE and find the appropriate solution to put in this new stylesheet.

The CSS box model is broken in IE6 (and IE7 is still pretty bad) because it doesn't comply with W3C Standards.

 

Luckily though you can write a specific stylesheet for IE (or specific versions) by putting this in your head next to your normal stylesheet link:

 

<!--[if lt IE7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->

 

The if lt IE7 is equal to "if the browser is less than IE version 7 (eg. 6 or 5.5) then use this stylesheet". You can change the lt to lte (less than or equal to) or get rid of it entirely (eg. if IE would be "all IE versions"!).

 

This is called a Coditional Stylesheet.

 

You'll have to do a search for what specifically is wrong with your page in IE and find the appropriate solution to put in this new stylesheet.

 

so i need to write another css file for ie6 and less? and what i should write on it to make the site looks normal??

plz if u have an example tell me

thx for ur replay

so i need to write another css file for ie6 and less? and what i should write on it to make the site looks normal??

plz if u have an example tell me

thx for ur replay

 

That's not the only way (although it's probably as good as any other).

 

There are always hacks for specific problems too (eg, ie6 won't let you have a div shorter than the size of your text, even if it's empty, but you can get round this by putting an empty comment tag inside the div <!-- -->).

 

The box model hack is one of the most famous and is well documented on google. Whatever's happening, it's always worth having a search, usually someone's already had the same problem as you and has put a solution on the web somewhere.

 

Hope that helps some

That's not the only way (although it's probably as good as any other).

 

There are always hacks for specific problems too (eg, ie6 won't let you have a div shorter than the size of your text, even if it's empty, but you can get round this by putting an empty comment tag inside the div <!-- -->).

 

The box model hack is one of the most famous and is well documented on google. Whatever's happening, it's always worth having a search, usually someone's already had the same problem as you and has put a solution on the web somewhere.

 

Hope that helps some

thx for replay,,,

will im new at css and the main now that i have a DIV with left and right border and thes border didnot apper at firefox but in ie it dose,,,, i dont know what to do but im gonna crzy

here is the file now after updating plz check them and tell me ur opinuon

html.zip

Hi Nana, had a look at your code - your content div is being rendered lower down in firefox than in explorer, but I guess you already know that. The main problem here is that you've made everything a lot more complicated than it has to be. The layout is fairly simple, but you've used so many divs and mixed up inline and external styles that something would inevitably go wrong.

 

You just need to try and simplify it down, you shouldn't need many divs to get this layout right, and once you do that the problem will become apparent or disappear. It'll take a while to go through all your code and it could do with a bit of a rewrite, but if you want I'll have a go at it sometime this week.

 

Best of luck

Hi Nana, had a look at your code - your content div is being rendered lower down in firefox than in explorer, but I guess you already know that. The main problem here is that you've made everything a lot more complicated than it has to be. The layout is fairly simple, but you've used so many divs and mixed up inline and external styles that something would inevitably go wrong.

 

You just need to try and simplify it down, you shouldn't need many divs to get this layout right, and once you do that the problem will become apparent or disappear. It'll take a while to go through all your code and it could do with a bit of a rewrite, but if you want I'll have a go at it sometime this week.

 

Best of luck

thx for ur replay kirstys brain,, i dont know what is right and wrond on css , im trying to learn it it really confused

thx for ur help and i waiting ur advise

That's cool - CSS is freaky when you're first getting into it. I'll be in touch as soon as I can..

Nana, don't be discouraged.

IE6 bugs are atrocious, but I realised that trying to amend them you end up simplifying the website layout a lot.

The thing that I used to do, when beginning with css, was using tons of divs, to be on the super-safe side But adding divs is adding complexity. If you reduce the number of divs, the number of possible bugs is also reduced. Moreover, many IE oddities derive from oddities in the organisation of the HTML; if you make you HTML more simple and consistent, your website will be more coherent across different browser.

When you really have to tweak a css for IE, I reccomend using

 

* html body your-selector {
blah blah
}

 

The * symbol matched only by IE, and is useful for small width, padding or margin adjustment. But remember, the ideal is to have a website the is "almost the same" in all browsers, and using these tweaks only for small adjustments.

Enjoy ;-)

Davide

That's cool - CSS is freaky when you're first getting into it. I'll be in touch as soon as I can..

yaaaaaa its freaky thx for ur help

Nana, don't be discouraged.

IE6 bugs are atrocious, but I realised that trying to amend them you end up simplifying the website layout a lot.

The thing that I used to do, when beginning with css, was using tons of divs, to be on the super-safe side But adding divs is adding complexity. If you reduce the number of divs, the number of possible bugs is also reduced. Moreover, many IE oddities derive from oddities in the organisation of the HTML; if you make you HTML more simple and consistent, your website will be more coherent across different browser.

When you really have to tweak a css for IE, I reccomend using

 

* html body your-selector {
blah blah
}

 

The * symbol matched only by IE, and is useful for small width, padding or margin adjustment. But remember, the ideal is to have a website the is "almost the same" in all browsers, and using these tweaks only for small adjustments.

Enjoy ;-)

Davide

hi Davide ,,,

can u plz explain more about

* html body your-selector {
blah blah
}

 

thx for replay

Hi nana, the * html method that Davide is using is an IE6 specific hack. It means that you can override the css for IE6 only.

For example, you may have css like this:

#mydiv {
width:40%;
float:left;
color:#000;
}

but in IE6 you are having problems because of the width.

You would then override the width declaration for IE6 only like this:

#mydiv {
width:40%;
float:left;
color:#000;
}
* html #mydiv {
width:39.9%;
}

For a few more hacks, have a look here

Hi nana, the * html method that Davide is using is an IE6 specific hack. It means that you can override the css for IE6 only.

For example, you may have css like this:

#mydiv {
width:40%;
float:left;
color:#000;
}

but in IE6 you are having problems because of the width.

You would then override the width declaration for IE6 only like this:

#mydiv {
width:40%;
float:left;
color:#000;
}
* html #mydiv {
width:39.9%;
}

For a few more hacks, have a look here

hi ElanMan i understant that now thx ,,,

 

i creat another css for ie i use this statment

<!--[if lte IE7]>

<link rel="stylesheet" type="text/css" href="style/ie.css" />

<![endif]-->

and when preview in ie7 it upper at the to of the page

Yep, I forgot to mention hat the hack is specific of IE6; at any rate, for some reason, it's IE6 that seems to generate most of my troubles.

Thanks ElanMan for clearing it up.

Davide

hi ElanMan i understant that now thx ,,,

 

i creat another css for ie i use this statment

 

and when preview in ie7 it upper at the to of the page

 

Conditional stylesheets need to go in the head of the html, not the body.

Conditional stylesheets need to go in the head of the html, not the body.

i use it in the head here is the code

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>SARAYA</title>

<link href="style/default.css" rel="stylesheet" type="text/css" />

<!--[if lte IE7]>

<link rel="stylesheet" type="text/css" href="style/ie.css" />

<![endif]-->

</head>

but it apper at top of the design when browsing,,,,

Hi Nana, had a look to see what I could do with your site, I've stuck together another version using only ten divs this time. It's pretty much the same as yours although you'll need to tweak the margins to your liking. It works in ie6, ie7 and ff3, and will also work in ie5 / ie5.5 if you put {text-align: center} in the body in your style sheet and adjust your margins again.

 

It's a bit thrown together and you'll probably need to make lots of changes, but hopefully it'll give you some new ideas about what CSS can do. To make it work in ie6 I've converted your PNGs to GIFs and JPGs, but if you're really determined to inflict PNGs on yourself this site will tell you how best to do it: A List Apart - PNGs

 

I've attached all the files including some new images. I hope it's helpful, good luck

 

saraya.zip

 

Kirsty

Hi Nana, had a look to see what I could do with your site, I've stuck together another version using only ten divs this time. It's pretty much the same as yours although you'll need to tweak the margins to your liking. It works in ie6, ie7 and ff3, and will also work in ie5 / ie5.5 if you put {text-align: center} in the body in your style sheet and adjust your margins again.

 

It's a bit thrown together and you'll probably need to make lots of changes, but hopefully it'll give you some new ideas about what CSS can do. To make it work in ie6 I've converted your PNGs to GIFs and JPGs, but if you're really determined to inflict PNGs on yourself this site will tell you how best to do it: A List Apart - PNGs

 

I've attached all the files including some new images. I hope it's helpful, good luck

 

saraya.zip

 

Kirsty

 

http://labs.unitinteractive.com/unitpngfix.php

Hi Nana, had a look to see what I could do with your site, I've stuck together another version using only ten divs this time. It's pretty much the same as yours although you'll need to tweak the margins to your liking. It works in ie6, ie7 and ff3, and will also work in ie5 / ie5.5 if you put {text-align: center} in the body in your style sheet and adjust your margins again.

 

It's a bit thrown together and you'll probably need to make lots of changes, but hopefully it'll give you some new ideas about what CSS can do. To make it work in ie6 I've converted your PNGs to GIFs and JPGs, but if you're really determined to inflict PNGs on yourself this site will tell you how best to do it: A List Apart - PNGs

 

I've attached all the files including some new images. I hope it's helpful, good luck

 

saraya.zip

 

Kirsty

hii kirstys, u do agr8 job and u help me seeing the right way in CSS i will learn from ur files

 

i see that u r useing specific hight to the left and right border and for border_main, and what if i need a bigger hight for inner pages should i repet the style for each page? some times i need the hight to expand when i have alot of content to put inside the page

 

thx alot for ur help, u r a gr8 person

i see that u r useing specific hight to the left and right border and for border_main, and what if i need a bigger hight for inner pages should i repet the style for each page? some times i need the hight to expand when i have alot of content to put inside the page

 

Hey there

 

Yes I know what you mean, you can easily make it vertically expandable (instead of horizontally as it is now) by replacing the images and divs that are there now with these, and stacking them on top of each other instead of floating them left:

 

First a wide flat one holding the top border and rounded corners and putting it in a wide div at the top Then one that is 1px tall and holds the two side borders to go in the main div and have no height specified so that that div can expand downwards. The bottom of your border goes in the last image and that goes in a wide flat div at the bottom. This should achieve the desired effect, although the file sizes will be a bit bigger.

 

Good luck!

Hey there

 

Yes I know what you mean, you can easily make it vertically expandable (instead of horizontally as it is now) by replacing the images and divs that are there now with these, and stacking them on top of each other instead of floating them left:

 

First a wide flat one holding the top border and rounded corners and putting it in a wide div at the top Then one that is 1px tall and holds the two side borders to go in the main div and have no height specified so that that div can expand downwards. The bottom of your border goes in the last image and that goes in a wide flat div at the bottom. This should achieve the desired effect, although the file sizes will be a bit bigger.

 

Good luck!

hi kirsty, im little confused coz i still think it in table way :S

now i should have: div with top border contains the corner, then a div with left and right border, then at bottom a div contain the footer,,, and the other containt gose inside the second div which have left and right border??

hi kirsty, im little confused coz i still think it in table way :S

now i should have: div with top border contains the corner, then a div with left and right border, then at bottom a div contain the footer,,, and the other containt gose inside the second div which have left and right border??

 

Yep, that's right. It should work as long as your 3 divs are directly on top of each other.

Yep, that's right. It should work as long as your 3 divs are directly on top of each other.

thx kirstys for ur replay, i will try it and if i have any Q's i will ask u

thx alot