JavaScript and client side scripting.
Moderator: General Moderators
kzar
Forum Newbie
Posts: 16 Joined: Thu Nov 25, 2004 3:03 pm
Post
by kzar » Fri Jan 07, 2005 6:51 am
Been trying to hack a bit of a better layout for my project using css, It looks how I want in firefox but terrible in IE.
http://kzar.co.uk/test/test.htm to see it for yourself.
Here is the css
Code: Select all
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
margin: 0px;
padding: 0px;
position: relative;
}
h1 {
height: 30px;
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
right: 0px;
border-bottom: 1px dashed #666;
background-color: #cccccc;
padding: 5px 5px 5px 5px;
}
div#menu {
background: #EDF4FF;
position: absolute;
top: 40px;
left: 0px;
width: 150px;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
margin-left: 0;
margin-top: 5;
margin-right: 0;
border: 1px black solid;
}
div#stuff {
background: #EDF4FF;
position: absolute;
top: 40px;
left: 160px;
right: 0px;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
margin-left: 5;
margin-top: 5;
margin-right: 5;
border: 1px black solid;
}
I'm totaly clueless in how to sort it out, so any ideas would be handy.
Thanks
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Tue Jan 25, 2005 4:48 pm
Maybe try this:
Code: Select all
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 0px;
}
h1 {
height: 30px;
left: 0px;
top: 0px;
right: 0px;
margin: 0px;
border-bottom: 1px dashed #666666;
background-color: #cccccc;
padding: 5px;
}
#menu {
background-color: #EDF4FF;
top: 40px;
left: 0px;
width: 150px;
padding: 5px;
margin-bottom: 10px;
margin-left: 0;
margin-top: 5;
margin-right: 0;
border: 1px #000000 solid;
}
#stuff {
background-color: #EDF4FF;
top: 40px;
left: 160px;
right: 0px;
padding: 5px;
margin-bottom: 10px;
margin-left: 5;
margin-top: 5;
margin-right: 5;
border: 1px #000000 solid;
}
I think
background needs to be
background-color . And thry this... when you code your <DIV> tags using the style for menu or stuff, call it like:
Code: Select all
<div id="menu">something here</div>
This is just a thought. Try it out and see if it helps. Post back if it worked.
harpax
Forum Newbie
Posts: 1 Joined: Wed Feb 09, 2005 10:26 am
Post
by harpax » Tue Mar 08, 2005 11:04 am
Hey,
IE and Mozilla parse boxes (as <div> or <h>) different. IE includes margin, border and padding values in the width while in Mozilla only the inner box (the content) is width.
IE.width = mozilla.width + margin + padding + border
http://css-discuss.incutio.com/?page=BoxModelHack shows some workarounds
hope that helps
zenabi
Forum Commoner
Posts: 84 Joined: Mon Sep 08, 2003 5:26 am
Location: UK
Post
by zenabi » Tue Mar 08, 2005 1:56 pm
Note that IE6 will render the box model correctly if it is not in quirks mode, i.e you set a Doctype at the start of your HTML files.
It will be beneficial if you can learn to code to XHTML Strict. See:
http://www.w3schools.com/xhtml/xhtml_intro.asp