Jump to content

Layout Problem


PSXtreme

Recommended Posts

Well I'm working on converting my site from a layout using tables to a layout with just <div> tags and css. But I've come across a problem.

 

There is a small gap between the bottom of the menu border and the bottom bar when viewed in IE. It works fine in Firefox, but IE keeps giving me the small gap. I'm just wondering if someone can help me fix this.

 

URL: http://linuxcommie.net/~zioxide/v4/index.html

CSS: http://linuxcommie.net/~zioxide/v4/zi.css

 

Thanks in advance. smile.gif

 

Oh yeah, I know the logo doesn't work. I haven't made it yet, because I'm a lazy bastard.

Link to comment
Share on other sites

Heres a fix I found.

 

Change

 

min-height: 210px;

 

 

To

 

height:100%;

 

 

That solves it, and it expands fine when more content is added.

Link to comment
Share on other sites

Oooh, who did you steal the colours from? That's a fine-looking site. smile.gif

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

XHTML 1.1 cannot be sent with a MIME type of text/html because it is a pure XML application (XHTML Media Types). XHTML 1.0 Strict is the backward-compatible reformulation of HTML as an XML application. XHTML 1.0 Strict can be set as text/html provided it conforms to the XHTML Appendix C: Compatibility Guidelines to ensure it truely is conformation to the text/html MIME type.

 

When using XML-based markup, the XML NameSpace attribute is a requirement of the <html> element, as is the XML Language and legacy HTML Language attribute. Text Direction is also a desireable attribute to use for this element to assist with browser rendering and prevent confused rendering in regions which use alternative text directions.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

This would be a better way to structure the top of your document so that you can retain the legacy support of this MIME type. If you are writing in Great British English rather than United States English, change the language codes to en-GB instead of en-US.

 

 

  <form action="contact.php?act=send" method="post"> <table class="form"> <tr><td class="formleft">Name</td><td class="formright"><input type="text" name="name" size="40" maxlength="100" /></td></tr> <tr><td class="formleft">E-Mail</td><td class="formright"><input type="text" name="email" size="40" maxlength="100" /></td></tr> <tr><td class="formleft">Subject</td><td class="formright"><input type="text" name="subject" size="40" maxlength="100" /></td></tr> <tr><td class="formleft">Message</td><td class="formright"><textarea name="message" cols="37" rows="8"></textarea></td></tr> <tr><td class="formleft"> </td><td class="formright"><input type="submit" value="Send" /> <input type="reset" value="Clear" /></td></tr> </table> </form>

Tables should not be used for layout. Bloated code, unreliable browser implementations and issues with containing HTML elements within table cells mean they should only be used reliably for tabular data, which is their intended purpose. Instead, by using accessible form techniques you can gain a lot more control over how the form is presented, aligned and offer greater flexibility for the end user. You are missing <fieldset> and <legend> elements for this form, which although not mandatory are strongly recommended for aiding comprehension and accessibility.

 

 

<form action="contact.php?act=send" method="post"><fieldset><legend>Email Zioxide</legend><label for="username">Name:</label><input type="text" id="username" name="username" size="40" maxlength="100" /><br /><label for="email">E-Mail</label><input type="text" id="email" name="email" size="40" maxlength="100" /><br /><label for="subject">Subject</label><input type="text" id="subject" name="subject" size="40" maxlength="100" /><br /><label for="message">Message</label><textarea id="message" name="message" cols="37" rows="8"></textarea><br /><input type="submit" value="Send" /> <input type="reset" value="Clear" /><br /></fieldset></form>

This is how the markup should look. You might apply a class or ID to the <form> so that you can give it unique styling to other forms the site may use. I would recommend you retain the <br /> tags so that legacy agents without CSS support will definitely render each control on a seperate line with the label on the same line as its associated control. Attributes like name="name" run a slight risk of confusing less sophisticated user agents and so might be avoided.

 

Use CSS to give specific styling to these elements. I would suggest using percentage widths so that the form renders proportionally in different viewport widths and makes the best use of available space.

 

 

Your code is very inefficient. It suffers from "class-itis" which means you are giving all your elements an explicit class when they could be given no class. Using selectors intelligently, you can target elements via their parent elements. This would make your markup a lot leaner and would make your CSS easier to manage. It would also enable you to change designs with less effort because there would be fewer class'ed elements to create new equivalents of.

 

The code also suffers from "div-itis" where you use the generic, semantically neutral <div> element instead of semantically rich elements like <h1-6> and <p>. This makes your page a big lump of meaningless code and text to search engines.

 

 

  <div class="news"> 	<div class="news-top"><a href="news.php?id=16">Bored</a></div> 	<div class="news-body">   <div class="news-info-top">posted by zioxide on Aug 24 2005 @ 11:07 pm</div>   Wow I'm bored.   <div class="news-info-bottom"><a href="news.php?id=16">0 Comments</a> | <a href="news.php?id=16">1 View</a></div> 	</div> </div>

This is a good example of inefficient code. For starters, you have not parked up your paragraphs with the <p> element. This element makes it a doddle for search engines to target the actual content in your pages. Your headings are not using heading elements which should descend from <h1> to <h2> by importance in a consecutive manner. The masses of indentation bloat the code and make it harder to work with because it wastes space, meaning you can't fit as much code into an editor window.

 

 

<div class="news"><h2><a href="news.php?id=16">Bored</a></h2><div class="date">posted by zioxide on Aug 24 2005 @ 11:07 pm</div><p>Wow I'm bored.</p><p>I think I'll write a second paragraph to keep myself entertained.</p><div class="links"><a href="news.php?id=16">0 Comments</a> | <a href="news.php?id=16">1 View</a></div></div>

That's the sort of markup I would suggest.

 

 

.news {}.news h2 {}.news .date {}.news p {}.news .links {}

That's the sort of CSS structure I would suggest. Class names should convey the purpose of an element rather than the presentation and should do so in a short, efficient manner. If you decide to change the presentation, you would have to rename classes which contained presentational aspects. By using selectors intelligently, the heirarchy can be expressed once in the CSS file by the selector instead of being expressed many times in a class names like news-info-top.

 

 

 

div.body {

Stuff like this is like the name="name" attribute. They can confuse user agents and they can also confuse the person trying to work with the site! tounge.gif

 

At first I didn't think there were any links on your page but after "scrubbing" the page with the mouse I noticed that the status bar was flashing in certain areas. So, I spiralled in on these areas and managed to find some links. Having to go through a digital treasure hunt just to find a hyperlink is not how users want to spend their time. Use underline on links so they can be immediatly identified as links. In your sidebar, the links are a block element and so a background colour would be more appropriate than underline.

 

Visited link seem to be using the exact same style as normal links. Letting the users actually see where they have been aids navigation enormously. In fact, it is one of the most important aspects of navigational architecture.

 

Your site uses a fixed width which means it only makes good use of the available space for people running a browser with a viewport width of about 772 pixels. Which probably isn't going to be very many people.

 

 

(EDIT) I've gone into a lot of detail because your use of XHTML 1.1 indicates to me that you are serious about making a site which uses modern design techniques. smile.gif

Edited by Cerbera
Link to comment
Share on other sites

First off, I want to say thanks for you taking your time to give me help like that. I'm fairly new at this XHTML stuff, and a lot of that stuff I had no idea about. I got the DOCTYPE fixed and I'm using XTHML 1.0 Strict now.

 

1. The DOCTYPE & meta stuff: Got that sorted. smile.gif

 

2. The forms: I'm still having problems with that, so I'll talk about that in a minute.

 

3. The news blocks & comment blocks. I've converted them all to that new style you said I should used, and I also fixed up the CSS. It took me a couple of minutes to fix the design to be the same, but I got it working now. biggrin.gif

 

4. div.body: fixed these a bit. smile.gif

 

5. Links are now underlined. biggrin.gif

 

6. I'm going to do a visited color, just haven't got a chance to decide on one yet.

 

Wewt, lots of changes. Now back to the form things.

 

I'm having a problem getting the form aligned correctly.

 

On the http://linuxcommie.net/~zioxide/v4/ page, there are two contact forms; The top is the table version, and the bottom is the version with labels. Now I want to get the bottom to be aligned like the top, but I have no idea how I can get the input fields to align without using something to hold them in. If you could help me out with this, I would appreciate it greatly. biggrin.gif

 

 

EDIT: Nevermind, Svip helped me out. Thanks! You can see the layout up and running now at http://linuxcommie.net/~zioxide/

Edited by PSXtreme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.