CSS Differences in Browsers

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
webphotogeek
Forum Newbie
Posts: 18
Joined: Sun Jul 04, 2010 12:11 pm

CSS Differences in Browsers

Post 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>
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: CSS Differences in Browsers

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: CSS Differences in Browsers

Post by AbraCadaver »

Good luck dude. This is why I still use tables!
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: CSS Differences in Browsers

Post 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
Post Reply