CSS DIV Layout Problem

liunx

Guest
Hi,

I am working on my first CSS Tabless layout and am having a couple problems that I know of at the moment. The URL is <!-- m --><a class="postlink" href="http://www.greatlakesgaming.net">http://www.greatlakesgaming.net</a><!-- m --> and the style sheet is at <!-- m --><a class="postlink" href="http://www.greatlakesgaming.net/style.css">http://www.greatlakesgaming.net/style.css</a><!-- m -->

First, I cannot seem to find out why my News Header (middle column) background isn't displayed correctly. As you can see, if you visit the site, the alignment is off a bit somehow. The background image is off a bit as well as the News label on the background.

Second, I am having problems with the footer not staying at the bottom of the page when the middle column is shorter than the right and left columns. You cannot see this on my webpage since the middle column is longer than the right and left. But before it was longer the footer crept up to just below then middle column.

Can anyone here offer any help to correct these problems? Any help is greatly appreciated!

-RogueFoxxI think your absolute positioning is getting to you somehow. I see what you're saying about the news background but that's really minor compared to what I see in Mozilla. I'd recommend you look at your site with a standards compliant browser, not just IE.I have been viewing the site in IE6, Mozilla Firebird 0.7 and Opera 7.22 and everything looks fine other than what I've stated. And the problem I've stated only occurs in IE6. Renders perfectly fine in the others. So could you elaborate on the problems you may be seeing, because I don't see them in my "standards compliant" browsers.

-RogueFoxxOriginally posted by ray326
that's really minor compared to what I see in Mozilla. I'd recommend you look at your site with a standards compliant browser, not just IE.
I see no problem with his site while viewing it in Moz 1.5You appear to be using tables incorrectly (for non-tabular data) and you're even using deprecated elements such as the <font> tag, yet styling it with CSS; use <span> instead. You should also try to use more semantically meaningful markup (such as <h1> for headings and the like). You may also want to consider fixing all of these problems (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.greatlakesgaming.net%2F">http://validator.w3.org/check?uri=http% ... ing.net%2F</a><!-- m -->)...@ray326

Since my first reply to yours I have Download ed Mozilla 1.5 and Netscape 7.1 and checked my site in both those browsers and still saw nothing wrong. Not sure what you were seeing, but maybe the site didn't fully load for you or something.

I have corrected the problem with IE6... I had to specify a specific height hack for IE6 in my CSS.

* html #middle {height: 1%}


I have also found out what I have to do for the footer as well, not an uncommon problem with CSS.

@fredmv

I personally am not using tables or font tags whatsoever for this layout. The only tables you will see in my layout are the ones from the poll,which I didn't code, and which I have not had time to change the template for yet.
If you would have looked at any of those errors in the validation of my page, which by the way I have checked many times, you would have noticed that almost every single one has to do with there being a <br> line break instead of it being closed as such <br />. That is due to the fact that my news is being included from my forums which inserts the unclosed tag unfortunately. This is something I am going to be looking into rectifying in the near future, but is something that isn't too serious a problem and isn't a single problem that I asked about in the first place.

I ask that if you are going to offer any help then please address the problems in question. Also, please look into the problem and post some useful suggestions. I don't think you really read my first post.

Anyway, thanks to the rest of you for your attempt to help, but this problem has been solved!

-RogueFoxxOriginally posted by RogueFoxx
I personally am not using tables or font tagsYou aren't?<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="1"></td>
<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">Logitech MX 500</font></td>
</tr>
<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="2"></td>
<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">Logitech MX 300</font></td>
</tr>
<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="3"></td>

<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">Other Logitech</font></td>
</tr>
<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="4"></td>
<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">MS Explorer 3.0</font></td>
</tr>
<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="5"></td>
<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">MS Blue</font></td>
</tr>
<tr>
<td width="15%" align="left"><input type="radio" name="option_id" value="6"></td>
<td width="85%" align="left"><font style="color: #3A4F6C; font-size: 10px;">Other MS</font></td>Originally posted by RogueFoxx
I ask that if you are going to offer any help then please address the problems in question.I did offer help; it may not seem directly related to the problems in question but everything I mentioned is.

By using invalid code will present problems since you should be writing your code based on the DOCTYPE in question (which you aren't doing — using deprecated tags and attributes). You shouldn't be using tables for non-tabular data (which you are also doing) which will cause accessibility, layout, as well as rendering slowdown. Your code also doesn't make sense semantically, which will lower your ranking for search engines. You should be writing code in which follows the rules specified in the DOCTYPE you're using.

Whether you realize it or not, the suggestions I've given you are vital and you should really consider correcting everything I've mentioned.Originally posted by RogueFoxx
Also, please look into the problem and post some useful suggestions.
I'd suggest reading over the message posting guidelines (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=16096">http://forums.webdeveloper.com/showthre ... adid=16096</a><!-- m -->) again. Specifically this part:Regardless of how big your ego is, it is NOT someone else's
privilege to debug Your code. It is not their privilege to have them
help you. It is YOURS. Remember that when people help you they are
doing YOU the favor. You are not doing them a favor by letting them see
your incredible buggy application. Be patient help people out by posting
good descriptions of what you need help with, and not snapping at
people with garbage such as "if you aren't going to help don't waste my
time replying".Originally posted by RogueFoxx
I don't think you really read my first post.I did, and I told you everything that you should be doing in order to prevent present and future problems.@fredmv

No, I am not using tables... If you again would have fully read my post you would have seen after that statement that the POLL that I am using has the tables in it and I have not yet edited the template other than colors.

I am not asking for you to debug my code, and I don't expect anything from you... I asked you two simple questions in which you offered no help with.

Anyway, as I said before the problem has been solved and corrected. And if you see any future posts by me I would appreciate it if you, fredmv, did not reply.

Thanks and have a nice day.

-RogueFoxx
 
Back
Top