Resolution/Cross-Browser Problems [Archive]

View Full Version : Resolution/Cross-Browser Problems

adamj3333

11-08-2007, 08:36 PM

Hey there,
I have been struggling with this site for a while now and I was hoping to get a fresh pair of eyes to look at it. I am not sure how to get the site to view the same in all of the different browsers and especially in different resolutions. Can anyone offer help. I have included the HTML first and the CSS second.

<code><html>

<head>

<title>Listen Vermont - Rutland County's Online Community</title>

<link href="lvstyles1.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body
{
background-image: url(xmastree_bg_snow.jpg);
background-position: 50% 0%;
}

</style>

</head>

<body>

<div id="left">

</div>

<div id="right">

</div>

<div id="middle" align="center">

<div><a href="shopper.html"><img src="Listen_Vermont_Banner_Ad.jpg" border="2" style="border-color: #000000"></a><img style="float: left" src="Listen_Vermont_Logo_Temp.gif" border="0"></a>
<ul id="list-nav">

<li><a href="home.html">Home</a></li>
<li><a href="mistletoe.html">Mistletoe</a></li>
<li><a href="wcfr.html">WCFR</a></li>
<li><a href="podcast.html">Local Podcasts</a></li>
<li id="list-nav-extend"><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="listen">
<br><br>
<img style="float:right" src="santa_waving.jpg">

<table width="500" cellpadding="10">

<tr>

<td valign="top"><a href="mistletoe.html"><img src="front_click_to_listen_mistletoe.gif" border="0"></a>
<td valign="top"><a href="wcfr.html"><img src="front_click_to_listen_wcfr.gif" border="0"></a> </td>

</tr>

</table>
<br><br>
<div id="wx_module_4095">
<a href="http://www.weather.com/weather/local/USVT0205">Rutland Weather Forecast, VT</a>
</div>

<script type="text/javascript">

var wx_config='SZ=300x250*WX=FHW*LNK=SSNL*UNT=F*BGI=fall*MAP=null|null*DN=listenvermont.com*TIER=0*PID=1 051384401*MD5=dc5f2928375c98f18c7c78ab324d912e';

document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');
</script>

<br><br>
<font size="4">Contact ListenVermont.com at <a href="mailtO:info@listenvermont.com">Info@ListenVermont.com</a></font>
<div>
<embed src="Countdown_clock.swf" wmode="transparent" width="750" height="70" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
<a href="home.html">
</div>
<table cellpadding="10">

<tr>

<td><img src="120x90_ad_1.jpg"></td><td><img src="120x90_ad_2.jpg"></td><td><img src="120x90_ad_1.jpg"></td><td><img src="120x90_ad_2.jpg"></td><td><img src="120x90_ad_1.jpg"></td>

</tr>

</table>

</div>

</div>

</body>

</html></code>

CSS

<code><style type="text/css">

body {

margin: 0px;

padding: 0px;

}

div#left {

float: left;

width: 100px;

}

div#right {

float: right;

width: 100px;

}

div#middle {

padding: 0px 120px 0px 120px;

margin: 0px;

}

ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:500px;
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:url("nav_bar_back.jpg");
color:#eee;
float:left;
}

ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}

li#list-nav-extend {
width: 100px;
float:left;
}

</style>

</code>

Thanks so much in advance.

Adam

Rappa

11-08-2007, 08:50 PM

You must understand that this is a problem web developers have been facing since the dawn of the internet. No matter how perfectly you make a website, there will always be differences between, IE,FF,Opera,Safari, Ect. But it is up to you to do some research and try to manipulate your code to get it to work to the best of its abilities, this means:

Don't use depricated Tags
Do your best to become XHTML Valid
More that im hoping others will fill in for me.

And what are those <code></code> tags?

Anyway, a link to your site would help.

-Rappa

Excavator

11-08-2007, 09:10 PM

Hello adamj333,
Cross browser compatibility can be difficult, that's why we try to write the most compliant code possible to start with. You probably need a DocType declaration, at least for starters. Check the link in my sig below.

For code tags to work in the forum they are enclosed in [ brackets instead of <.

adamj3333

11-09-2007, 04:32 PM

Hey guys, thank you so much for all your help. I have validated the XHTML of this page and am still having problems with things moving around at different resolutions and in different browsers. Can anyone help? Here's the code again.

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

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

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Listen Vermont - Rutland County's Online Community</title>

<link href="lvstyles1.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body
{
background-image: url(xmastree_bg_snow.jpg);
background-position: 50% 0%;
}

</style>

</head>

<body>

<div id="left">

</div>

<div id="right">

</div>

<div id="middle">

<div><a href="shopper.html"><img src="Listen_Vermont_Banner_Ad.jpg" style="border-color: #000000; border-width: 2;"

alt="" /></a><a href="home.html"><img style="float: left" src="Listen_Vermont_Logo_Temp.gif" alt="" /></a>
<ul id="list-nav">

<li><a href="home.html">Home</a></li>
<li><a href="mistletoe.html">Mistletoe</a></li>
<li><a href="wcfr.html">WCFR</a></li>
<li><a href="podcast.html">Local Podcasts</a></li>
<li id="list-nav-extend"><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="listen">
<br /><br />
<img style="float:right" src="santa_waving.jpg" alt="" />

<table width="500" cellpadding="10">

<tr>

<td valign="top"><a href="mistletoe.html"><img src="front_click_to_listen_mistletoe.gif" alt="" /></a></td>
<td valign="top"><a href="wcfr.html"><img src="front_click_to_listen_wcfr.gif" alt="" /></a> </td>

</tr>

</table>

<br /><br />
Contact ListenVermont.com at <a href="mailtO:info@listenvermont.com">Info@ListenVermont.com</a>

<table cellpadding="10">

<tr>

<td><img src="120x90_ad_1.jpg" alt="" /></td><td><img src="120x90_ad_2.jpg" alt="" /></td><td><img src="120x90_ad_1.jpg"

alt="" /></td><td><img src="120x90_ad_2.jpg" alt="" /></td><td><img src="120x90_ad_1.jpg" alt="" /></td>

</tr>

</table>

</div>

</div>

</body>

</html>

Thanks.
Adam

vtjustinb

11-09-2007, 05:56 PM

I'll just chime in here and repeat my advocacy of not striving for pixel-perfect rendering in every browser.

If the client firmly requires it that's one thing, but I think it's a far better utilization of development time to develop the site with a standards-compliant browser in mind, and then go back and make tweaks for other browsers only in the cases where a rendering bug is making your content inaccessible. One page having a margin of 10px and another of 6px isn't a huge deal, but if your content is totally unreadible in IE6 that's another.

I think as designers we all need to let go of pixel-precision, and instead focus on flexible designs that do not rely on pixel-precision and the ability to be ok if a legacy browser doesn't render exactly the same as FF.

Excavator

11-09-2007, 06:43 PM

Hello again adamj3333,
Good job on validating and using a doctype...
I think to get more help your going to have to give us a link so we can see the images.

adamj3333

11-09-2007, 07:25 PM

Thanks for everybody's help so far...I have the link, but unfortunately this is not the validated page, because I am doing this for a friend who has still not given me access to the ftp site, so he is uploading it and he hasn't uploaded the validated one yet. So...here is the link.

http://listenvermont.com/

A couple of other things I have noticed. If I view it in 1280x1024 it looks fine, but even in that resolution, if I don't have my browser maximized then it throws the site off again.

Let me know if there's anything you can do to help me out from here?

Thanks so much.

Adam