Help - Search - Members - Calendar
Full Version: Issues with compatiblity
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
kotton
Hey guys im pretty new at all this, i took a class at school on html and css and learned alot of this stuff but there is so many little tricks and methods to fix issues that i really dont want to do it much but I need to finish my portfolio site and the only option I have is handcoding in crimson editor and using my css anthology book. Well on to the main problem I have a great looking layout in firefox but when i put it in IE it throws my nav from the left to the right. Im gonna past all the code HTML first and CSS second hope that its ok to paste it all, its usually better to see all then just a bit. rolleyes.gif

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Portfolio for Bryan Fritz</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="index.html">Design</a></li>
<li><a href="index2.html">Photography</a></li>
<li><a href="index3.html">Print</a></li>
</ul>
</div>
<h2>Design</h2>
<ul id="albumlist">
<li><img src="images\audi.jpg" alt="" width="300px" height="225px" />An Advertising Concept.<br> Program used Photoshop</li>
<li><img src="images\audi2.jpg" alt="" width="300px" height="225px" />Another Advertising Concept <br> Program used Photoshop</li>
<li><img src="images\frizzle.jpg" alt="" width="300px" height="225px" />Unconventional Logo <br> Program used Photoshop</li>
<li><img src="images\logos.jpg" alt="" width="300px" height="225px" />Logo Ideas <br> Illustrator and Photoshop</li>

</ul>
</body>
</html>

CSS

body {
background-image: url(images/portfoliosite.jpg);
background-repeat: no-repeat;
background-position:top left;
}
h2 {
float: absolute;
margin-top:20px;
margin-left:860px;
margin-bottom:10px;
width: 45px;
}
#nav {
position: absolute;
margin-top: 75px;
margin-left:-5px;

}
#nav ul{
list-style: none;
}
#nav ul li{
margin-bottom: 30px;
}

#albumlist {
list-style-type: none;
margin-top: 60px;
margin-left:240px;
width: 850px;
}
#albumlist li {
float:left;
margin-top: 10px;
margin-right: 10px;
}
#albumlist img {
display:block;
}


Thanks for any help or suggestion that may come in the future Bryan
pandy
Hi! tongue.gif

Why do you use an XHTML doctype when you write HTML? I suggest that you change to a HTML doctype, because that's probably what you'll serve the page as anyway.
http://www.htmlhelp.com/tools/validator/

You have a fat CSS error here. IPB Image
h2 {
float: absolute;...}
Did you mean 'position: absolute'?
http://jigsaw.w3.org/css-validator/


I don't have an explanation, but a fix. If you give the AP blocks an offset you'll get them to where you want them to be. For example #nav:

#nav {
position: absolute;
top:0; left: 0;
margin-top: 75px;
margin-left:-5px; }
kotton
Thanks I cant say that with a quick read I understand all that you said but I am sure that after a few times over I will get it. blink.gif About positioning anyways, I am so up in the air, I read through the book I have and its kinda sparce on how and what position applies to all things html, do you have a dummies guide or something that does a really good job explaining position that i could check out? On the doc type I read another post about doc type and I was somewhat confused, now i know that xhtml is just html rewritten in xml or at least I think so, but isnt it better to code then in xhtml than html? or am I just totally out of my league? thanks again. wacko.gif
pandy
XHTML has a slightly different syntax than HTML. Most of us around here see no advantage in using XHTML. If you want it to work in IE Windows you have to serve it with the content-type text/html which means that browsers will treat it as HTML anyway. So all you've gained is a few extra bytes of slashes (which you are lacking).
http://www.w3.org/TR/xhtml1/#diffs
http://www.spartanicus.utvinternet.ie/no-xhtml.htm


If you don't give an absolutely positioned element an offset it should basically stay where it was without positioning (that's not all true but close enough) only it will be "out of the flow", i.e. removed from the context of the page flow and on top of surrounding elements. There is no reason it should go waltzing off to the right margin, so there must be something in your code causing that but I don't see it right off.

I found this tutorial useful.
http://www.brainjar.com/css/positioning/
There are probably lots of newer ones but I'm afraid I don't have any bookmarked.

Crimson editor is cool. Just get friendly with the validators and you're all set. cool.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.