I'm having trouble with the way different browsers treat borders, currently I have the page working in the latest versions of FF, Opera and IE, but in Safari 3 (win vers.) and IE6 there is a small white gap on the right hand side between the menu divs and the container-border div. Setting *{margin: 0} makes the page work in Safari, but breaks in everything else.
The
HTML is:
- HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" class="container"><div class="containerBorder">
<div id="menu1" class="menu" onclick="menuShow('menu1menu')"><div class="border">Menu 1</div></div>
<div id="menu2" class="menu" onclick="menuShow('menu2menu')"><div class="border">Menu 2</div></div>
<div id="menu3" class="menu" onclick="menuShow('menu3menu')"><div class="border">Menu 3</div></div>
<div id="menu4" class="menu" onclick="menuShow('menu4menu')"><div class="border">Menu 4</div></div>
<div id="menu5" class="menu" onclick="menuShow('menu5menu')"><div class="border">Menu 5</div></div>
</div></div>
</body>
</html>
and the
CSS is:
- Code: Select all
div.container
{
width:80%;
height:400px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
div.containerBorder
{
border-style:solid;
border-width:3px;
height:400px;
}
div.menu
{
width: 20%;
float: left;
}
div.border
{
border-style:solid;
border-width:3px;
}
You can also view/save the page and
css from:
http://www.iliveinabin.com/Styles.html
http://www.iliveinabin.com/Style.css
I created the border divs to get the page to work in IE7, not sure if there's another way to do it? Please can anyone help me get the page to work in these main browsers?
Div borders & different browsers
Jan 6th, 2008, 23:17
Similar Threads
