Ok so I am making a website with Xhtml and CSS. My layout so far looks sweet in IE, but not in firefox. It is just a simple 2 colum one. I think it might have somehting to do with my float and clear properties, I think its positoning stuff, witch is really the only thing I am truely strugleing with now. Hear it is...
IE ... http://i93.photobuck...y_Bouzy/ggj.jpg
Firefox... http://i93.photobuck..._Bouzy/gg-1.jpg
Code...
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: 12px;
color: #eea103
}
/*Divs*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 26px;
margin-bottom: 20px;
float: right;
margin-left: 195px;
}
#sidebar {
overflow: auto;
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 26px;
margin-bottom: 20px;
margin-left: auto;
margin-right: 20px;
float: left;
clear: right;
}
#navigation {
margin: 0px;
padding-top: 0px;
border-width: 0px;
}
#banner {
border-width: 0px;
margin: 0px;
padding: 0px;
}
#container {
width: 712px;
margin: 0px auto;
position: relative;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
0
Ie Vrs. Firefox
Started by Bouzy210, Jul 03 2007 11:38 PM
5 replies to this topic
#2
-
- Members
-
- 76 posts
Young Padawan
Posted 04 July 2007 - 10:49 AM
Can you post your XHTML and rest of the CSS. for the header etc?
To me it seems like you've done it back to front, for instance not in a logical way.
whack up all your code and i'll sort it.
I think i see your problem, but i wanna check your other code to full proof it.
To me it seems like you've done it back to front, for instance not in a logical way.
whack up all your code and i'll sort it.
I think i see your problem, but i wanna check your other code to full proof it.
Edited by Diaz, 04 July 2007 - 11:03 AM.
#3
-
- Members
-
- 434 posts
Jedi In Training
- Gender:Male
Posted 04 July 2007 - 11:00 AM
Sure thing...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Goldfish Graphics</title>
<link type="text/css" rel="stylesheet" href="Goldfish.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" />
</div>
<div id="navigation">
<img src="images/navigation.jpg" alt= "navigation background image" />
</div>
<div id="content">
<h2>Home</h2>
<p id="home">
a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd
;fjasdlnmvcxv
safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx
nmvlkwefiojoasejlkfscnvklnsa
sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka
sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn
fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj
</p>
<h4>News (7/02/07)</h4>
<p id="news">
a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd
;fjasdlnmvcxv
safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx
nmvlkwefiojoasejlkfscnvklnsa
sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka
sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn
fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj
</p>
</div>
<div id="sidebar">
<h5>Testimonies</h5>
<p>
""
</p>
<p>
Links
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Goldfish Graphics</title>
<link type="text/css" rel="stylesheet" href="Goldfish.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" />
</div>
<div id="navigation">
<img src="images/navigation.jpg" alt= "navigation background image" />
</div>
<div id="content">
<h2>Home</h2>
<p id="home">
a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd
;fjasdlnmvcxv
safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx
nmvlkwefiojoasejlkfscnvklnsa
sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka
sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn
fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj
</p>
<h4>News (7/02/07)</h4>
<p id="news">
a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd
;fjasdlnmvcxv
safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx
nmvlkwefiojoasejlkfscnvklnsa
sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka
sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn
fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj
</p>
</div>
<div id="sidebar">
<h5>Testimonies</h5>
<p>
""
</p>
<p>
Links
</p>
</div>
</div>
</body>
</html>
#4
-
- Members
-
- 76 posts
Young Padawan
Posted 04 July 2007 - 11:36 AM
Ok dude, here is the new code, which will work in all browsers.
CSS:
XHTML:
Notice compared to your code how i created the layout logically (I always start from the top). Header then nav then sidebar then content etc.
Many designers code there layouts differently when using columns but i usually go from left to right making templates float: left;
NB: I removed all your margins etc and padding so you will have to re-add them obv as i don't know the size of the images your using etc.
But the code i have done will allow to columns to float perfectly.
If you need anymore help.
I'm here.
CSS:
/* CSS Document */
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: 12px;
color: #eea103
}
.clear {
clear: both;
}
#container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#banner {
border-width: 0px;
margin: 0px;
padding: 0px;
}
#navigation {
margin: 0px;
padding-top: 0px;
border-width: 0px;
}
#sidebar {
overflow: auto;
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
float: left;
}
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
margin-left: 5em;
float: left;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Goldfish Graphics</title> <link type="text/css" rel="stylesheet" href="style1.css" /> </head> <body> <div id="container"> <div id="banner"> <img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" /></div> <div id="navigation"> <img src="images/navigation.jpg" alt= "navigation background image" /></div> <div id="sidebar"> <h5>Testimonies</h5> <p> ""</p> <p> Links</p> </div> <div id="content"> <h2>Home</h2> <p id="home"> a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd ;fjasdlnmvcxv safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx nmvlkwefiojoasejlkfscnvklnsa sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj</p> <h4>News (7/02/07)</h4> <p id="news"> a;lksdjfas;dlkjflasdjf;lashlnvlsajfeopialnv.xzcnvopiweaflmnawlnmv.xcmnoweajfljsd ;fjasdlnmvcxv safdl;aksjdlfjwaeonvlsncvlanjds;lkjfvawoijelfnv,.csnlkjzolejfoipawjeofjsd.vnmlzx nmvlkwefiojoasejlkfscnvklnsa sdfl;sadjfl;weajfoijsdlkjfvlxcnl;kvjsdal;kfjoaewjfosdjlkfjsdl;kjflsdjflksadjflka sekjflsdjvoajlksdnlvkjsdfjweoajmsdnvklvn fas;ldfjlajds;lfasdjldsaj;lasdkjflksdjflasdjflasdj</p> </div> <div class="clear"></div> </div> </body> </html>
Notice compared to your code how i created the layout logically (I always start from the top). Header then nav then sidebar then content etc.
Many designers code there layouts differently when using columns but i usually go from left to right making templates float: left;
NB: I removed all your margins etc and padding so you will have to re-add them obv as i don't know the size of the images your using etc.
But the code i have done will allow to columns to float perfectly.
If you need anymore help.
I'm here.
#5
-
- Members
-
- 434 posts
Jedi In Training
- Gender:Male
Posted 04 July 2007 - 12:29 PM
Thank you so much. I guess that makes sense and I read somewhere you are supposed to do header, nav. and right to left, but it didn't click. I will try this and fix my code.
#6
-
- Members
-
- 76 posts
Young Padawan
Posted 04 July 2007 - 12:43 PM
Not a problem, if you need anymore help in me explaining the coding etc, I can.
I'm not great at explaining how to do things etc. I just know it in my head
I'm not great at explaining how to do things etc. I just know it in my head
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
