[web] Compatibility

This topic is 5413 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I've decided on a design for my web site, and it looks good in internet explorer, but the proportions are out of whack in Firefox (and I haven't tried in in Opera). Here's the code for it: div3-white.html
<html>

href="style3-white.css" />

<IMG src="treeBanner2-7.jpg" alt="Banner">
</div>

<div id="side">
<p>

<a href="music-white.html">- Music</a> <br><br>

</p>

<div class="spacer">

</div>
</div>

<div id="content">
<p>
<i>Tuesday, September 21, 2004</i> <br><br>

Well, today's my birthday, so I guess it's appropriate to actually load some content
and get this site up and running today. Not all the links to external things (music and
such) work yet, but everything else should. If you have any feedback, feel free to fill
out a <a href="feedback.html">feedback form</a> and tell me what you think.
<br><br><br>

<i>Wednesday, July 15, 2001</i> <br><br>

E pluribus unum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam,
consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum.
Ut wisis enim ad minim veniam, consequat, vel illum dolore eu feugiat
nulla facilisis
at vero eros et accumsan.
<p> </p>

<div class="spacer">

</div>
</div>

<div id="footer">
<p>
"What lies behind us and what lies before us are small matters compared to what lies within us." - Ralph Waldo Emerson
</p>
</div>

</html>


style3-white.css
html, body {
margin: 0px 10% 2%;
background-color: #fff;
color: #000;
}

color: #999;
text-decoration: none;
}

a:hover, a:active {
color: #000;
text-decoration: none;
}

#logo {
width: 150px;
float: left;
margin-left: -1px;
margin-right: 0 px;
}

#side {
color: #000;
width: 150px;
float: left;
margin-left: -1px;
font: 14px arial;
}

#content {
color: #000;
background-color: #fff;
margin-left: 160px;
border-left: 5px solid #008000;
}

background-color: #fff;
color: #666;
margin-top: 10px;

font: 50px arial;
border-bottom: 5px solid #008000;
}

#quote  {
float: left down;
margin-left: 10px;
font: 10px arial italic;
border-bottom: 5px solid #008000;
text-align: right;
}

#footer {
background-color: #fff;
color: #999;
border-top: 5px solid #008000;
text-align: right;
clear: both;
font: 11px times;
}

.spacer {
clear: both;
}

margin-top: 0px;
}


Does anyone know how to make it more cross-browser? I think it has something to do with making the side margin -1, but I'm not sure, and it also modifies the banner's distance from the top line note if you get a huge banner ad that takes up like half the page, I don't have control over that...if you refresh the page, it should eventually come up without it

Share on other sites
First I suggest you add the correct DOCTYPE to cause IE to use the correct parsing engine for your site. This will help IE and Firefox to level the field in compatibility so you can determine where the problem lies. I personally feel that Firefox handles your layout better than IE, this could be fixed by the DOCTYPE. For one, relative sized/positioned elements under IE are handled very differently when you change the DOCTYPE as IE can choose to use its legacy parsing/display engines.

The reason that your layout is more spaced out in IE is because IE likes to add more spacing to elements. I'm not sure on the exact details, but I think that IE defaults to padded elements and Firefox doesn't (at least without a DOCTYPE). Therefore, to add spacing in your header, etc you need to adjust your padding.

The best way to do cross browser development is to havea copy of your page open in each browser and review the changes each time they're made. It's a pain to do, but is very successful in producing cross-browser pages.

Share on other sites
thanks for the reply! I'll take a look at doctypes. Actually, after seeing it in Firefox, I've began to wonder if it would look better with less or no space between the banner and the content boreder...I'll have to experiment with that. My current target audience (friends mostly) I think all have internet explorer, but I myself have actually gone to Firefox since I created the site, and I might as well make it cross-browser if I can.

Share on other sites
This can also be an issue, although I highly doubt it has anything to do with your current problem. I just wanted to add, that in order for tags to be XHTML compliant, they should all be written in lowercase; same goes for properties. I'm only bringing that up, as I noticed an uppercase image tag in your document.

Also, to make certain tags XHTML compliant, you need to use the open-close method of tagging, as in:

<br /> <!-- Opens and closes the tag. --><img src="something.gif" /> <!-- Same again. -->

I'd also strongly recommend what evolutional has suggested regarding doctypes. It really can aid cross-browser site construction and is very easy to implement.

Quote:
 The best way to do cross browser development is to havea copy of your page open in each browser and review the changes each time they're made. It's a pain to do, but is very successful in producing cross-browser pages.

Couldn't agree more. At work, I sometimes had 4 or 5 different browsers open at any one time, viewing the same site. It is a bit painstaking, but if you really do want your site to look great on as many platforms as possible, it's certainly necessary.

Incidentally, along those lines, I remember reading a post on this forum about having multiple versions of IE installed. I actually tried it and it worked wonders. Ah, here's the thread.

Share on other sites
Mozilla (I guess Firefox too) has a problem with the parent having a margin and the child too. The parent or child (dunno exactly anymore) will take over the parents/childs margin. To prevent this, you can add a bottom-border or better, a whole border of 1px or greater to the parent.

This is a known bug by the way.

• 18
• 29
• 11
• 21
• 16