...

View Full Version : IE to Firefox differences. trying out CSS & HTML



iainmackay85
11-28-2008, 11:53 PM
I have been using w3schools to practice using CSS for the layout and design of my HTML pages.

within the past 4hrs I am happy with what I have learnt. So I have a look using IE instead of firefox, and its wrecked! I am unsure how I overcome these problems!

Any pointers would be greatly appreciated.

Thanks in advance,


<html>
<head>
<style type="text/css">
body{
background: #E00000;
}
div.title{
/*background: url('title.jpg') no-repeat top;*/
background: white;
text-align: center;
width:900px;
height:80px;
margin: 0px auto 0px auto;
}

div.mainBody{
height:800px;
width: 900px;
background: #FFB0B0;
margin: 35px auto 0px auto;
border: 3px solid #909090;
}

/*============== MENU TABS =================*/
div.menu1{
text-align: left;
width: 900px;
margin: 0px auto 0px auto;

}
#menuList1
{
padding: 3px 0;
border-bottom: 3px solid #909090;
font: bold 14px Verdana, sans-serif;
width: 900px;
}

#menuList1 li
{
list-style: none;
display: inline;
}

#menuList1 li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #909090;
border-bottom: none;
background: #F00000;
text-decoration: none;
}

#menuList1 li a#current
{
background: #FFB0B0;
border-bottom: 3px solid #FFB0B0;
}

#menuList1 li a:link { color: #000; }
#menuList1 li a:visited { color: #000; }

#menuList1 li a:hover
{
color: #000;
background: ##FFFFFF;
border-color: ##3FFF3F;
}

ul#menuList1 li#active li ul#subMenu
{
display:none;
}
ul#menuList1 li#active ul#subMenu
{
display:block;
}
ul#menuList1 li#active li#active ul#subMenu
{
display:block;
margin-top: 3px;
}

ul#subMenu
{
display:none;
position: absolute;
margin-left: -3px;
padding: 0px 0px;
margin-top: 6px;
background: #FFB0B0;
border-left: 3px solid #909090;
border-right: 3px solid #909090;
border-bottom: 3px solid #909090;
width: 900px;
text-align: left;

}

ul#subMenu li
{
background: transparent;
}

ul#subMenu li a
{
background: transparent;
border:none;
font-weight: lighter;
}


ul#subMenu li a#current
{
border:none;
background: transparent;
font-weight: bold;
}

/*==============END OF MENU=============*/
</style>
</head>
<body>
<div class="title">
<h1>Title</h1>
</div>

<div class="menu1">
<ul id="menuList1">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li id="active"><a href="#" id="current">Item3</a>

<ul id="subMenu">
<li><a href="#">Item3.1</a></li>
<li id="active"><a href="#" id="current">Item3.2</a>

<ul id="subMenu">
<li><a href="#" id="current">Item3.2.1</a></li>
<li><a href="#">Item3.2.2</a></li>
</ul>

</li>
<li><a href="#">Item4</a></li>
</ul>
</li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>
</div>
<div class="mainBody">
main text area
</div>
<div>
footer
</div>
</body>

</html>

drhowarddrfine
11-29-2008, 12:01 AM
I'm surprised you missed the part about using a proper doctype. Without one, browsers go into quirks mode, a place you never want to be, and IE, in particular, won't attempt to act like the modern browsers. Add this to your first line of your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ubh
11-29-2008, 12:05 AM
Hi iainmackay85,
Dang, a little too late. drhowarddrfine is correct.


In addition, it looks like you are trying to create a content hide and display with pure css. I talk about this is my tutorial on how to create a pure css content hide and display located here. (Note:look at the .htc file and IE fix part of the tutorial)

Pure CSS Content Hide and Display Menu (http://www.devinrolsen.com/tutorials/css/css_display_hide_content/index.html)

You might also be interested in my CSS Menu Builder Tool (http://www.devinrolsen.com/tools/menu_builder/index.html).

Hope this helps some.

iainmackay85
11-29-2008, 12:09 AM
I'm surprised you missed the part about using a proper doctype. Without one, browsers go into quirks mode, a place you never want to be, and IE, in particular, won't attempt to act like the modern browsers. Add this to your first line of your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


you know how it is just skip down to the interesting parts :p

it has only fixed the css alignment.

thanks anyway.

Regards,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum