Jump to content
opus74

Css Question

Recommended Posts

This site is my first attempt at using a CSS, instead of tables.

 

Can anyone explain why this site renders differently in Netscape than it does in Mozilla, than it does in IE ?

 

I'm trying to get all the menus across the top in all browsers.

 

Thanks.

 

http://www.silweather.com/

 

:)

Share this post


Link to post
Share on other sites
This site is my first attempt at using a CSS, instead of tables.

 

Can anyone explain why this site renders differently in Netscape than it does in Mozilla, than it does in IE ?

 

I'm trying to get all the menus across the top in all browsers.

 

I tested this in IE6 and Firefox (I don't have Netscape). The two do interpret some CSS differently, and I've read arguments that can go on for days as to which one interpets according to W3C.

 

I'm assuming that you want all four menus accross the top? If that is the case, then you'll need to define the width in the "menulist" class to 24% instead of 33%.

 

Since you put the pic within the first menulist div, then IE will form the width of that div at the same width as the image, therefore the other menulist divs will not float at a consistent width. Firefox, just lets the image extend beyond the width dimension.

 

I moved the image to a position after the fourth menulist div, changed the width in the CSS definition for menulist to 24%, and enclosed the image div in a div with align=center. Please see if this is closer to what you wanted.

 

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!----------------------------------------------------------->
<!--     AUTHOR:   L&B                                     -->
<!--     CREATED:  01/28/2007                              -->
<!--     MODIFIED: 04/24/2007                              -->
<!--     FILE:     index.html                              -->
<!--     PURPOSE:  SILWeather Index                        -->
<!----------------------------------------------------------->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>
Southern Illinois Weather from www.SILWeather.com
</title>

<style type="text/css">
<!--
body {
	color: #ffff00;
	background-color: #293933;
	font: 100%/1.2em normal "Franklin Gothic Medium", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
div#page {
	width: 100%;
	border: none;
	margin: 0 auto;
}
h1.marquee { 
 	color: #fffff00;
	font-size: 150%;
	font-variant: small-caps bold ;
} 
h2 {
	text-decoration:underline;
	font-size: 130%;
	font-variant: small-caps;
	text-align: center;
}
img {
	border-style: none;
}
.menulist {
	width: 24%;
	float: left;
	margin: 0;
	padding: 1px;
}
.menulist ul {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}
.menulist li a{
	list-style-type: none;
	text-decoration: none;
	display: block;
	border: 1px outset #336;
	margin: 0 auto;
	padding: 1px 3px;
	color: #ffc;
	background: #233020;
	width: 80%;
}
.menulist li a:hover {
	border: 1px inset #fff;
	background: #2f533f;
	text-decoration: none;
}
marquee {
	border: 3px double #233020;
}
.pics {
	margin: 5%;
	width: 80%;
                              
                }

                               
	
-->
</style>

</head>

<body>

<div id="page">
		<h1 class="marquee"><marquee scrolldelay="75" scrollamount="6">Welcome to www.SILWeather.com...Weather In Your Neighborhood !!!    Test drive our new site (Under Construction) as we continue to update our information & content to serve Southern Illinois better    ---    Live weather conditions coming soon     ---     New Site Updates 4/24/07     ....</marquee></h1>

		<div class="menulist">
			<h2>Current Local Weather</h2>
			<ul>
				<li><a href="http://www.discoversil.net">Local Conditions (Coming Soon)</a></li>
				<li><a href="http://www.weather.gov/view/validProds.php?prod=RVA&node=KPAH" target="_blank">Hydrologic Summary</a></li>				
				<li><a href="localradar.html" target="_blank">Southern Illinois WX Radar</a></li>				
				<li><a href="http://www.crh.noaa.gov/forecast/MapClick.php?CityName=Mulkeytown&state=IL&site=PAH" target="_blank">Southern Illinois NWS Forecast</a></li>
				<li><a href="http://www.weather.gov/view/validProds.php?prod=NOW&node=KPAH" target="_blank">Short Term Forecast</a></li>
				<li><a href="http://www.weather.gov/view/validProds.php?prod=HWO&node=KPAH" target="_blank">Hazardous Weather Outlook</a></li>			

			</ul> 
</div>
			
		
		
		<div class="menulist">
		<h2>Illinois Weather</h2>
			<ul>
				<li><a href="http://weather.gov/mirs/public/prods/maps/state_zone_illinois.htm" target="_blank">Zone Map</a></li>					
				<li><a href="http://iwin.nws.noaa.gov/iwin/il/zone.html" target="_blank">Zone Forecasts</a></li>
				<li><a href="http://iwin.nws.noaa.gov/iwin/il/hourly.html" target="_blank">Hourly Conditions</a></li>
				<li><a href="http://iwin.nws.noaa.gov/iwin/il/summary.html" target="_blank">Weather Summary</a></li>
				<li><a href="http://www.dot.il.gov/wrc/report.asp" target="_blank">Road Conditions</a></li>
				<li><a href="wrindx.html" target="_blank">Weather Radio SAME Codes & Maps</a></li>
			</ul>
		</div>
		
		<div class="menulist">
		<h2>National Weather</h2>
			<ul>
				<li><a href="http://www.spc.noaa.gov/products/watch/" target="_blank">Current SPC Convective Watches</a></li>
				<li><a href="http://www.spc.noaa.gov/products/wwa/" target="_blank">SPC Watch/Warning Map</a></li>
				<li><a href="http://www.spc.noaa.gov/" target="_blank">Storm Prediction Center</a></li>
				<li><a href="http://www.weathertap.com" target="_blank">WeatherTap.com</a></li>

			</ul>
		</div>			

		<div class="menulist">
		<h2>Pro Weather</h2>
			<ul>
				<li><a href="http://www.weather.gov/view/validProds.php?prod=AFD&node=KPAH" target="_blank">Forecast Discussion</a></li>
				<li><a href="http://www.nco.ncep.noaa.gov/pmb/nwprod/analysis/" target="_blank">Computer Models</a></li>
				<li><a href="http://www.spc.noaa.gov/obswx/maps/" target="_blank">Upper Air Maps</a></li>
				<li><a href="http://www.crh.noaa.gov/pah/" target="_blank">NWS - PAH</a></li>
				<li><a href="mailto:website1@silweather.com">Comments About Our Site?</a></li>

			</ul>
		</div>
<div align="center">			
<div class="pics">
				<img src="http://icons.wunderground.com/data/640x480/2xradarc4_anim.gif" width="640" height="480" alt="Your Regional WX Radar from SILWeather.com">
			</div>	
</div>
</div>

</body>

</html>

Share this post


Link to post
Share on other sites

I also removed the auto from the margin definition in the pics class. This seemed to be a problem in Firefox.

Edited by Bob Crabb

Share this post


Link to post
Share on other sites

I'd recommend specifying a font family and size etc in your menulist definitions. Also have you have now noticed the different browsers have different ideas of what the border outset, ridge etc should be.

Share this post


Link to post
Share on other sites
I moved the image to a position after the fourth menulist div, changed the width in the CSS definition for menulist to 24%, and enclosed the image div in a div with align=center. Please see if this is closer to what you wanted.

 

Bob, that's excellent. :)

 

The 24% makes sense now that you point it out .....

 

The radar placement is much better as well.

 

Thanks so much for the help. I really appreciate it !!!!

Share this post


Link to post
Share on other sites
I'd recommend specifying a font family and size etc in your menulist definitions. Also have you have now noticed the different browsers have different ideas of what the border outset, ridge etc should be.

 

Wouldn't it be great if we had standards and everbody complied with them ....

 

Thanks !!

Share this post


Link to post
Share on other sites

Opus,

 

I'm glad to have helped. :)

 

Wouldn't it be great if we had standards and everbody complied with them ....

 

Thanks !!

 

The W3C has defined standards for, among other things, CSS, but the problem seems to be in the interpretation of some of those standards. The more that you work with CSS, you will see more inconsistencies between how some things are rendered between the different browsers. Sometimes the differences are subtle, sometimes not, but it is always good to test a new page to see how it renders in several browsers.

 

BTW, that is an interesting site. I'll look at it from time to time to see what weather is brewing to the south of us. :)

 

--Bob

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...