[SOLVED] help with IE CSS

[Renlok]

im making a site its rendering perfectly in firefox, but in IE it looks horrible. Ive no idea how i can sort it out the sites http://www.roeonline.co.uk if anyones interested in helping me

[dbrimlow]

To start with, unless you use "valid" code all bets are off when it comes to cross-browser debugging.

Here is the w3c validating page for your site:

 

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.roeonline.co.uk%2F

 

My advice is to lose the xhtml doctype and use html 4.01 strict.

 

Most of your errors are caused by items that do not belong in xhtml. And unless you are parsing XML, there is no point to using xhtml anyway (since it is being served as html in the first place).

 

But if you insist on using xhtml ... remember that it is unforgiving and strict in not allowing certain things:

 

The old "ul" tags for underlining is right out. Create a class for underlining and use span tags whenever you need something underlined.

 

Text and text modifiers cannot flap in the breeze without a proper block tag container (p tag, ul and li tag, header tags, etc). You can't just slap line break tags anywhere without any text as a styling item. Line break tags are just that ... the break up a line of text to force a new line. And you certainly can't just jump in and start writing text without containing it somehow.

 

This will not do:

#  
</div>
Welcome to roe this will evolve into a RPG pet game like no other.<br />
If you have an account <a href="http://www.roeonline.co.uk/login.php">login</a><br />
<br />
As its not even been released in beta, its is very currently buggy. We are constantly working to remove these bugs and make the game as fun an easy to use as possible. If your willing to help us in anyway please register and/or contact admin.<br />
<a href="http://www.roeonline.co.uk/register.php">[join]</a>
<p>
Estimate Beta release: Unknown<br />
<br />
<br />
<a href="http://www.roeonline.co.uk/list.php">Current members</a>
<br /><br />
<br />
Check out the <a href="http://www.roeonline.co.uk/news.php">Recent news</a>
<p><u>Game Stats</u></p>

 

You are using br tags to create spacing between lines that are not contained in a paragraph.  Use paragraphs, headers and lists (in this case I used a "definition list") and style the tag's margins and paddings for spacing, instead of trying to space items with break tags:

 

#  
</div>
<p>Welcome to roe this will evolve into a RPG pet game like no other.</p>

<p>If you have an account <a href="http://www.roeonline.co.uk/login.php">login</a><p>

<p>As its not even been released in beta, its is very currently buggy. We are constantly working to remove these bugs and make the game as fun an easy to use as possible. If your willing to help us in anyway please register and/or contact admin.<br />
<a href="http://www.roeonline.co.uk/register.php">[join]</a></p>

<h3>Estimate Beta release: Unknown</h3>

<h3><a href="http://www.roeonline.co.uk/list.php">Current members</a></h3>

<h3>Check out the <a href="http://www.roeonline.co.uk/news.php">Recent news</a></h3>

<dl>
   <dt>Game Stats</dt>
   <dd>Total members: 303</dd>
   <dd>Total pets: 226</dd>
   <dd>Total posts: 227</dd>
   <dd>Total views: 206226</dd>
<dl>

 

The Form tag cannot come after, and be within, a block tag.

 

change this:

 

<p class="mainsideinf">
<form action="http://www.roeonline.co.uk/login.php" method="post">
Username: <input type="text" name="username" size="20" /><br />
Password: <input type="password" name="password" size="20" /><br />
<input type="hidden" name="login" value="true" />
<input type="submit" value="Log In" />
</form>
</p>

 

to this - when using text in a form element enclose it in a block tag:

<form action="http://www.roeonline.co.uk/login.php" method="post">

<p>Username: <input type="text" name="username" size="20" /></p>

<p>Password: <input type="password" name="password" size="20" /></p>

<input type="hidden" name="login" value="true" />
<input type="submit" value="Log In" />
</form>

 

This showed me that you have experience coding old, html 3.0. And with a little research into properly using stylesheets to "style" your block level tags (and remembering to actually USE block level tags for text), you are almost ready for html 4. But under no circumstances should you be using XHTML instead of HTML. It is too strict and requires an absolute understanding of semantic tag markup. While your page can be easily fixed for cross-browser viewing with html 4.01.

 

Good luck,

 

Dave

 

 

 

 

[Renlok]

Thanks for your help i've done everything you've recommended and i've validated the vast majority of my site. But its not really helped me much in terms of sorting out the layout in IE

[Renlok]

sorry for double posting but ive just found what the problem was

[dbrimlow]

Much better. But, it would make your life easier if you used a strict doctype and just checked the validation tool.

 

Here is what would make it work in strict:

 

1. remove "border="0" from images. Instead put this in your css file which will remove borders from any image on your site - "img {border:none}"

 

2. Remove the "u" tag from your dt. By its nature the dt tag is a title tag within a definition list - sort of like the table header tag (th). If you want it underlines simply put this in your css - "dt {font-style:underline} - HOWEVER, it is standard web practice to not underline anything that isn't a hyperlink. Think about it ... if you see any text that is underlined you click on it, right?

 

3. My error in the original revision. You actually do need to put any input tag within a block tag. So put the other block tags in paragraphs.

 

4. There is no "center" tag. But you can easily just add "text-align:center" to your css #footer id. And lose the font tag in the footer as well.

 

Your layout would be much more under control is you stopped using br tags in every paragraph.

 

You can set the margins and paddings for p tags for each id or class div in the css itself. Just add the p tag, like this:

 

#footer p {margin: 5px, padding: 0 5px} that gives a full 5px margin on all side and a left and right padding of 5px. You can adjust the spacing for all p tags the same way.

 

But start with the main p tag. Just set p {margin:5px} at the beginning of the css and adjust each specific class p tag as needed.

 

I recommend that you start using lists for links. See how nicely the definition list lays out? You can modify them as you like like this:

 

dl {margin:5px 10px}

dt {font-weight:bold}

dl {margin: .25em; padding .5wm}

 

Now for links in a list:

 

change this:

<p>
<a href="http://www.roeonline.co.uk/"><img src="/images/layout/roe.jpg" border="0" alt="Roeonline logo, welcome to our community."></a><br>
<a href="../members.php">Your Roe</a><br>
<a href="../news.php">News</a><br>
<a href="../travel.php">Travel</a><br>
<a href="../shop/district.php">The District</a><br>
<a href="../chat.php">Chat</a><br>
<a href="../arcade.php">Arcade</a><br>
<a href="../forum/forum.php">Forums</a><br>
<a href="../learn.php">Learning Room</a><br>
<a href="../help.php">Help</a><br>
<a href="../polls.php">Poll Booth</a><br>

</p>

 

to this:

 

<ul>
<li><a href="http://www.roeonline.co.uk/"><img src="/images/layout/roe.jpg" border="0" alt="Roeonline logo, welcome to our community."></a></li>
<li><a href="../members.php">Your Roe</a></li>
<li><a href="../news.php">News</a></li>
<li><a href="../travel.php">Travel</a></li>
<li><a href="../shop/district.php">The District</a></li>
<li><a href="../chat.php">Chat</a></li>
<li><a href="../arcade.php">Arcade</a></li>
<li><a href="../forum/forum.php">Forums</a></li>
<li><a href="../learn.php">Learning Room</a></li>
<li><a href="../help.php">Help</a></li>
<li><a href="../polls.php">Poll Booth</a></li>
</ul>

 

in your css do this (adjust margins paddings to suit):

 

#sidebar ul {margin:5px 10px}

#sidebar li a {margin:.25em; padding:.5em; list-style-type:none; text-decoration:none}

 

And my last bit of layout advice ... the four "a tag pseudo elements"  are - a:link, a:visited, a:hover and a:active. If you list any one of them, you MUST list all four and in their proper order - list, visited, hover active known as LVHA or LoVe HAte.

 

AND, you should do it everywhere you designate one pseudo element.

 

so change this:

/* ---------- 3. links and navigation ---------- */

a, a:link, a:visited {
	color: #0A3F5C;
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
	}

#navigation {
	padding-top: 8px;
	float: right;
	width: 180px;
	}

#navigation a {
	color: #2ea9d7;
	text-decoration: none;
	}

#navigation a:hover {
	text-decoration: underline;
	}

 

to this:

 

/* ---------- 3. links and navigation ---------- */

a, a:link, a:visited {
	color: #0A3F5C;
	text-decoration: none;
	}

a:hover, a:active {
	text-decoration: underline;
	}

#navigation {
	padding-top: 8px;
	float: right;
	width: 180px;
	}

#navigation a:link, #navigation a:visited {
	color: #2ea9d7;
	text-decoration: none;
	}

#navigation a:hover, #navigation a:active {
	text-decoration: underline;
	}
[code]

Good luck

[/code]