CSS Differences in Browsers
Posted: Wed Jun 15, 2011 4:03 pm
I am testing CSS for a photo website, but I don't understand why there is such a difference between browsers. When I look at it in Chrome, it looks correct (the way I set it up to look), but when I look at it in IE7, the menu buttons are not showing correctly.
Is there something I can do so that the browsers can handle all the code same?
Is there something I can do so that the browsers can handle all the code same?
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.box1 { width: 1000px; height: 800px; background-color: #FFFFFF; position:relative; left: 100px;
}
.box2 { width: 203px; height: 328px; position:absolute; top: 50px; left: 45px; background-color: #FFF8C6;
}
.box3 { width: 988px; height: 563px; position:absolute; top: 51px; left: 217px; float:right;
}
.box4 { width: 263px; height: 329px; position:absolute; top: -1px; left: 530px; background-color: #FFF8C6;
}
.box5 {
width: 964px;
height: 48px;
position:absolute;
top: 3px;
background-color: #FFF8C6;
left: 46px;
}
.object { margin-left: 30px; margin-right: 50px; color: #000000;}
.txt { color: #000000; font-size: 9pt; font-family: verdana; text-align: justify; font-style: italic; margin-left: 15px; margin-right: 15px;}
img { margin: auto; }
ul { /* For all tags under <ul> (main and sub)) */
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li { /* For all tags under <ul><li> (main and sub)) */
position: relative;
}
ul li a { /* For all tags under <ul><li><a> (main and sub)) */
display: block; /* Shows all tags under <ul><li><a> includs sub menus)) */
border-radius: 8px;
text-decoration: none;
background-color: #0000FF;
padding: 5px;
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
ul li a:hover {
display: block; /* Shows all tags under <ul><li><a> includs sub menus)) */ }
ul li a:hover {
display: block; /* Shows all tags under <ul><li><a> includs sub menus)) */
border-radius: 8px;
text-decoration: none;
background-color: #FF0000;
padding: 5px;
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box1">
<div class="box5"><img src="logo.jpg" border="0"></div>
<div class="box2">
<ul>
<li><a href="#">Portraits</a></li>
<li><a href="#">Celebrations</a></li>
<li><a href="#">Visions of the World</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- Close box2 -->
<!-- Close box3 -->
<div class="box3" allgn="center">
<div class="object">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
id="photos2"
width="500" height="330"
>
<param name="movie" value="photos2.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="seamlesstabbing" value="false">
<param name="allowscriptaccess" value="samedomain">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
name="photos2"
width="500" height="330"
src="photos2.swf"
bgcolor="#FFFFFF"
quality="high"
seamlesstabbing="false"
allowscriptaccess="samedomain"
> <noembed> </noembed> </embed>
</object>
</div>
<div class="box4">
<div class="txt">
<p>There are significant moments in everyone's life that deserve
to be captured. We are passionate about capturing those moments. Done
well, emotions and personalities shine through, creating memories that
will last a lifetime. </p>
We offer on-line photo galleries, where you can download the photos of your choice, available usually within 48 hours of your event.
</p>
</div> <!-- Close txt -->
</div> <!-- Close box4 -->
</div>
</div>
<!-- Close box1 -->
</body>
</html>