Back to General and Gameplay Programming

[web] Compatibility

General and Gameplay Programming Programming

Started by NewbJ September 23, 2004 08:35 PM

3 comments, last by Pipo DeClown 19 years, 7 months ago

NewbJ

226

Author

September 23, 2004 08:35 PM

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>

<head>
<link rel="stylesheet" type="text/css"
href="style3-white.css" />
</head>


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

<div id="side"> 
<p>
<a href="http://www.google.com>- Home</a> <br><br>

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

<a href="http://www.google.com">- Quotes</a> <br><br>

<a href="http://www.google.com">- Programs</a> <br><br>

<a href="http://www.google.com">- Links</a>
</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%;
	padding: 0;
	background-color: #fff;
	color: #000;
	}

a:link, a:visited {
	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;
        padding: 0px;
      }


#side {
	color: #000;
	width: 150px;
	float: left;
	margin-left: -1px;
	padding: 10px;
	font: 14px arial;
      }
	
	
#content {
	color: #000;
	background-color: #fff;
	padding: 10px;
	margin-left: 160px;
	border-left: 5px solid #008000;
	}

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

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

#quote  {
	float: left down;
	margin-left: 10px;
	padding: 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;
	padding: 2px 10px 0 0;
	clear: both;
	font: 11px times;
	}


.spacer {
	clear: both;
	}
	
p {padding: 0;
   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

evolutional

1,397

September 24, 2004 01:53 AM

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.

NewbJ

226

Author

September 24, 2004 08:47 AM

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.

hellz

356

September 24, 2004 09:12 AM

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.

Pipo DeClown

804

September 24, 2004 09:26 AM

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.

So try adding a border to your parent.

This is a known bug by the way.

[web] Compatibility

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

[web] Compatibility

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines