Page 1 of 1

CSS Differences in Browsers

Posted: Wed Jun 15, 2011 4:03 pm
by webphotogeek
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?

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>

Re: CSS Differences in Browsers

Posted: Thu Jun 16, 2011 12:11 pm
by social_experiment
webphotogeek wrote:Is there something I can do so that the browsers can handle all the code same?
You can 'test' for different types of browsers using php or javascript or you can include something like the code below that will load a different stylesheet depending on which browser the user is using to view your page

Code: Select all

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="style/IE.css"  media="screen" /><![endif]-->
This goes in the head of your html document. With this approach you should use external stylesheets as opposed to embedded stylesheets. This however doesn't guarantee that you will be able to get all browsers displaying your pages exactly the same.

Re: CSS Differences in Browsers

Posted: Thu Jun 16, 2011 12:46 pm
by AbraCadaver
Good luck dude. This is why I still use tables!

Re: CSS Differences in Browsers

Posted: Fri Jun 17, 2011 7:57 pm
by Weirdan
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.
And what exactly does look wrong to you? The lack of rounded colors? That's the only difference I see, and it's quite natural since IE did not support border-radius until IE9