50 replies [Last post]
onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

I'm a web design first year student, and I really want to get into this, so I'm pursuing CSS since its the current standard... anyway, I'm creating a new 2 column layout, with main content on the right and extra info on the left.

However, when displayed in firefox, the extra info is moved down, however it displays fine in IE7. If anyone can offer any help I would be extremely grateful.

I have attached some images that show the problem better than I can explain

Here is the code for my html:

Home Is Where You Make It | DBMedia.co.uk

NEWS | Layout Base Coding Nearing Completion | 23.01.07

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.

Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

NEWS | Layout Base Coding Nearing Completion | 23.01.07

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.

Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

Persona:

I slum it as a Graphic Design/New Media Student.
Raised on the sunny shores of Blighty.
...but speak a little Pigeon French.
I can

AttachmentSize
IE.JPG163.34 KB
FFox.JPG147.9 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Web design first year

Web design first year student? what does this mean? are you on some sort of collage course? and is this part of some assignment?

Regardless, first thing, have you tried validating this html code with the online validator, or html-Tidy?

Why are you using the span element to wrap a series of paragraph elements, even if the visual display is set to 'block'

You need to examine the approach to laying out a structured page and the correct use of the elements, and try and keep the flow and naming of the CSS logical,ensure that you have structured and named the main container divisions of the page within which you then place the content structure.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

i just thought I would state

i just thought I would state where I am at with CSS. And no it isnt an assignment, it would be cheating to ask if it was. I will try validating it.

I put the paragraph elements in for formatting purposes... the block is the whole container for a news entry... the same way that I would have used a TD before hand... the P's are just to create the correct paragraph formatting.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Not cheating as such,

Not cheating as such, depending on what one was asking to be done Smile

The paragraph formatting is fine but you need to look at how you're approaching setting out the major divisions of the page and what is actually allowed in terms of well formed markup which is why I wanted you to validate the code to see what sort of report was thrown up.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

Right, I've been through the

Right, I've been through the CSS and XHTML validator.

The CSS came up with no errors but 5 warnings (detailing where there is a colour and a bg colour the same... as an aside, is there any way to deal with this but not change the appearance of the site? Every instance of colour and bg colour being the same are areas where they don't cross over)

The XHTML came up with 5 errors. One for div id="navbar" and one for the paragraphs... They all have the same error message:

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

I'll have a bit of a mess myself, but if you can offer any advice I would really welcome it with open arms.

- Dan.

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

...I think I understand the

...I think I understand the reasoning behind these errors, its like you said the < p>'s are block level whereas the < span> they are contained in is inline. I replaced the paragraphs for < br /> spacing, however I need to think of a work around with this menu.

The right hand side has a logo and the navigation (created using an unordered list, so its block level). But the left hand side is another image, the size of both the logo AND the menu.

I thought to keep these all in the formatting they currently are in, I would have to wrap a < span> around them... but now I see this is invalid because the block-level div is trapped within a span.

Have you come across this before?

Any help is really genuinely appreciated, Dan.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Hmm, based on your markup

Hmm, based on your markup this is the actual validation report:

 Below are the results of checking this document for XML well-formedness and validity.

   1. Error Line 156 column 20: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="inline">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   2. Error Line 157 column 60: there is no attribute "border".

      <span class="floatleft"><img src="/images/photos.gif" border="0" alt="" /> </span>

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the  element to incorporate flash media in a Web page, see the FAQ item on valid flash.

      ?
   3. Error Line 159 column 16: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.

      <div id="navbar">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   4. Error Line 171 column 22: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="itemhead">NEWS | Layout Base Coding Nearing Completion | 23.01.07" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   5. Error Line 172 column 18: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="item">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   6. Error Line 173 column 2: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag.

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   7. Error Line 175 column 2: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag.

      <p>Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor 

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   8. Error Line 179 column 22: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="itemhead">NEWS | Layout Base Coding Nearing Completion | 23.01.07" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
   9. Error Line 180 column 18: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="item">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
  10. Error Line 181 column 2: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag.

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
  11. Error Line 183 column 2: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag.

      <p>Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor 

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
  12. Error Line 188 column 23: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="pers_text">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").

      ?
  13. Error Line 193 column 8: non SGML character number 146.

      I can??t drive (yet).<br />

      You have used an illegal character in your text. HTML uses the standard UNICODE Consortium character repertoire, and it leaves undefined (among others) 65 character codes (0 to 31 inclusive and 127 to 159 inclusive) that are sometimes used for typographical quote marks and similar in proprietary character sets. The validator has found one of these undefined characters in your document. The character may appear on your browser as a curly quote, or a trademark symbol, or some other fancy glyph; on a different computer, however, it will likely appear as a completely different character, or nothing at all.

      Your best bet is to replace the character with the nearest equivalent ASCII character, or to use an appropriate character entity. For more information on Character Encoding on the web, see Alan Flavell's excellent HTML Character Set Issues reference.

      This error can also be triggered by formatting characters embedded in documents by some word processors. If you use a word processor to edit your HTML documents, be sure to use the "Save as ASCII" or similar command to save the document without formatting information.

      ?
  14. Error Line 204 column 23: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

      <span class="pers_text">

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "") inside an inline element (such as "<a>", "<span>", or "").


The spans are the ones that i am trying to get across , you are not allowed to span block level elements you'll have to change them to divs .

Re: the background colors ignore for moment it's a warning.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

I have amended the code

I have amended the code slightly since I posted, so that accounts for some of the errors. Also, which doctype is that under? I am using transitional and it is only coming up with one error, is that strict, perhaps?

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

OK, here is my current code.

OK, here is my current code. I have run it through the validator at strict and it is coming back with no errors.

HOWEVER...

The problem I initially had is still here... there is a big gap between the logo and the "pers_text" class on the left. Since all the XHTML is valid, this points towards the error being in the CSS file... am I correct?

(BTW, I could have probably come here and you could have gone "just do this "... but instead you've told me to run through the validator time and again... and I want to thank you for that, I genuinely feel I have learned something tonight now Smile - not just about CSS but also about how powerful of a tool the validator really is.)

Again, continued thanks for any advice you can provide...

Home Is Where You Make It | DBMedia.co.uk

NEWS | Layout Base Coding Nearing Completion | 23.01.07
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.

Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

NEWS | Layout Base Coding Nearing Completion | 23.01.07
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.

Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

Persona:

I slum it as a Graphic Design/New Media Student.
Raised on the sunny shores of Blighty.
...but speak a little Pigeon French.
I cant drive (yet).
N64 is what I live for.
That, and my Fender Tele.
If I could only own one album it would be Bloc Party - Silent Alarm.
I can code HTML, XHTML, and CSS.
(Using Dreamweaver and without).
I can also draw pretty pictures in Photoshop...
...and not so pretty ones by hand.

Latest Additions:

"2.0 Grunge" Wallpaper
"1.0 Love T.K.O." Wallpaper
TheDanster.co.uk Wallpaper Archive
Black Books Sig

  • XHTML |
  • CSS |
  • RSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

I'm glad that you don't feel

I'm glad that you don't feel that it's unhelpful or uncaring advise but it's the best way to help someone who has the capability and willingness to learn. Hope that doesn't sound too up me own....

You've done good so far , there are other matters, but you need to get the layout straight really , and that means probably thinking in terms of a two column style layout it's easier if at first you establish two divs one floated left or right the other just margined away from the floated one by the floated ones width plus a little , this way you can work within these two divisions , the right side then has your .item divs which won't need floating just establish their width and auto margins to center within the right block, same principle for the left side content.

With things like the navbar you don't really need to wrap the ul in a div just make the ul #nav.

The .item sections will need some thought as to what elements best semantically suit the content i.e perhaps the 'news' 'dates' would suit dl lists or some similar arrangement

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

OK... so if I float the left

It seems as though whenever i remove the "float: right" and replace it with "padding-left: 400px;", all the elements on the right drop straight down... Im a bit confused :S

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

Right, I've looked at the

Right, I've looked at the ordering of the sections etc, and wrapped the main content and sidebar with an "inline" div. The only problem now is that in IE the items drop down to be inline with the sidebar, leaving a gap of a hundred pixels or so. It also looks completely messed up in 1280x1024, but thats just something im gonna have to live with I guess.

Thanks for all the help so far, is there a fix for this in IE, or is it just one of those things?

Thanks - Dan.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

No you don't have to live

No you don't have to live with any errors the layout is not complex but you need to understand basic layout flow and element positioning, can you post the code up that you now have or better still if you can post it to a live host so that we can see it in action.

And don't use extreme padding values at least not to try and position elements, padding adds to width.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 6 years 25 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

Unfortunately I can't get it

Unfortunately I can't get it live - my current server space disappeared a couple of months ago. If theres anywhere free I can host it temporarily I'll get it up there.

My XHTML

Home Is Where You Make It | DBMedia.co.uk


  • Home

  • Print

  • Media

  • Photography

  • Information

  • Profile



  • Persona:

    I slum it as a Graphic Design/New Media Student.

    Raised on the sunny shores of Blighty.

    ...but speak a little Pigeon French.

    I cant drive (yet).

    N64 is what I live for.

    That, and my Fender Tele.

    If I could only own one album it would be Bloc Party - Silent Alarm.

    I can code HTML, XHTML, and CSS.

    (Using Dreamweaver and without).

    I can also draw pretty pictures in Photoshop...

    ...and not so pretty ones by hand.

    Latest Additions:

    "2.0 Grunge" Wallpaper
    "1.0 Love T.K.O." Wallpaper
    TheDanster.co.uk Wallpaper Archive
    Black Books Sig

    Recommended Reading:

    Pixel2Life
    Spoono

    The Superficial

    Validation/Feed:

    XHTML | CSS | RSS


    | NEWS | Layout Base Coding Nearing Completion | 23.01.07



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.



    Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

    NEWS | Layout Base Coding Nearing Completion | 23.01.07
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue quam, rutrum a, tempor eu, auctor eget, felis. Integer ultrices iaculis augue. Maecenas ornare massa vel magna. Vestibulum dui erat, dignissim id, pretium ut, ultricies quis, neque. Fusce interdum adipiscing sapien. Donec dictum augue id libero. Curabitur felis. Fusce condimentum eros ut velit congue porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec adipiscing. Mauris interdum urna non ipsum.


    Vestibulum nonummy tortor sed est. Etiam mattis mauris a nisl. Nam porttitor dapibus enim. Aliquam non ante. In dignissim leo non elit. Sed metus dui, dignissim at, consequat eget, fringilla et, lectus. Vivamus volutpat porttitor nibh. Quisque sed risus. Proin tincidunt porta leo. Morbi a tellus. Etiam ac libero a urna mattis faucibus. Duis metus. Donec congue risus sed pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque. Aliquam lacus lacus, hendrerit non, hendrerit eget, posuere pharetra, mauris.

    My CSS:

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    font-size: 12px;
    }

    div#navbar {
    clear: right;
    width: 65%;
    float:right;
    margin-bottom: 40px;
    }
    div#navbar ul {
    float: right;
    margin: 0px;
    padding-top: 15px;
    }
    div#navbar li {
    list-style-type: none;
    display: inline;
    margin:0px;
    padding: 0px;
    }
    div#navbar li a {
    border-top: 1px #0D5BE5 solid;
    text-decoration: none;
    font-weight: bold;
    color: #0D5Be5;
    padding-right: 42px;
    }
    div#navbar li a:link {
    color: #0B5BE5;
    }
    div#navbar li a:visited {
    color: #0B5EB5;
    }
    div#navbar li a:hover {
    border-top: 4px #F6A71E solid;
    color: #F6A71E;
    }

    .inline {
    display: inline;
    }

    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .pers_text {
    margin-top: 20px;
    width: 30%;
    float: left;
    clear: left;
    color: #5993F8;
    border-left: 1px #5993F8 solid;
    padding-left: 15px;
    margin-left: 40px;
    vertical-align: top;

    }

    .pers_text a {
    color: #F6A71E;
    text-decoration: none;
    font-weight: bold;
    }

    .pers_text a:visited {
    color: #F8BE59;
    }

    .pers_text a:hover {
    color: #0D5BE5;
    text-decoration: none;
    }

    .valid_text {
    margin-top: 20px;
    width: 30%;
    float: left;
    clear: left;
    color: #5993F8;
    border-left: 1px #5993F8 solid;
    padding-left: 15px;
    margin-left: 40px;
    vertical-align: top;

    }

    .valid_text a {
    color: #1EF6A6;
    text-decoration: none;
    font-weight: bold;
    }

    .valid_text a:hover {
    color: #1EF63B;
    text-decoration: none;
    }

    .rss a {
    color:#F8BE59;
    }
    .rss a:hover {
    color:#F6A71E;
    }

    .itemhead {
    color:#FFFFFF;
    background-color: #93B9FB;
    width: 50%;
    display: block;
    clear: right;
    margin-top: 20px;
    margin-left: 42%;
    padding: 5px 0px 5px 20px;
    font-weight: bold;
    }

    .item {
    color:#FFFFFF;
    background-color: #5993F8;
    width: 50%;
    display: block;
    clear: right;
    margin-left: 42%;
    border-bottom: 2px #93B9FB solid;
    padding: 10px;
    }

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I did manage to upload

    I did manage to upload somewhere free temporarily, its crawling with ads though :/

    http://www.practice.fcpages.com/home.htm

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Looking at the updated code

    Looking at the updated code you posted shows that you have still got some mall-formed html; inline elements may not be children of the body element, the first group of spans will need some form of block level element to hold them.

    The layout seems to work now though?

    You have an extra closing div after your nav block which needs removing and those spans and images need re-thinking (you don't have a need for the span element change it to a div and call it #header and then perhaps float the images to where you want them.

    The web space sadly is a waste of time, far too much junk code added to be useful Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    yeah thought the webspace

    yeah thought the webspace might be.

    I changed the span "inline" at the top to a div (thats why I had that closing tag, I forgot to change the initial span class= to div.

    The "inline" is supposed to serve as the header, keeping together those 3 header elements, so is there a better to do this?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    onlydan wrote: The "inline"

    onlydan wrote:

    The "inline" is supposed to serve as the header, keeping together those 3 header elements, so is there a better to do this?

    Well probably to call the div #header Smile

    Inline is an already taken name in some respects so it is mildly confusing using it this way but that is your choice it's just an ID name.

    The grouping of those elements is the correct approach though.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    OK ill rename it then,

    OK ill rename it then, probably a good practice to get into. My mate is hosting for the time being - http://digitalmedia-designs.co.uk/dan if you want to take a look. It looks OK in 1024x768, but if you preview it in 1280x1024 you can see the right hand header elements look a little far to the side. Its only an aesthetic thing, but if there's any tips you can give me for shifting it over without destroying the news items I'd again, really appreciate it Smile

    edit - I have renamed the element, but I haven't re upped it yet, so the live version still says inline, but I have amended it.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Now the problem you need to

    Now the problem you need to address with the layout is that you don't really want the floated images to drop down one below the other. As images have a fixed width you might well use their combined widths plus a bit to set a fixed minimum width the layout will narrow to or possibly better enclose the whole layout in a wrapper element which you fix a width to and center in the viewport.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    OK, I think I'm with you...

    OK, I think I'm with you... so I'd create another div, similar to the header, only wrap it around everything?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    yeah, define it's width and

    yeah, define it's width and center using auto margins. You don't have to take this approach but it's the most straightforward one at this moment and the right image drops below the left rather quickly on narrower widths, you could also maybe place one of the images as a background then the floating becomes less of an issue, but you would then have an overlap situation so really you're forced to control the width in some manner.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I've gone with your first

    I've gone with your first suggestion, created a new div called container with a max and min width of ~1000px. This keeps everything in order no matter how its scaled. The only problem I have now is with centering it... I'm sure it's something simple I've overlooked but I know theres no direct link to align=center in css.

    Thanks Again, Dan.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    The standard procedure to

    The standard procedure to center fixed width is margin:auto.

    for the bad news; IE6 does not understand the min/max properties

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    Apologies if the last

    Apologies if the last message seemed a bit abrupt, I had a car waiting for me to go out.

    I had a quick look around, I found a piece of dynamic code that makes it work in IE:

    /* IE Dynamic Expression to set the width */
    width:expression(document.body.clientWidth < 550 ? "998px" : "100%" );

    I don't know how valid this is, but I'll worry about that tomorrow, I have to go now, I only nipped back online to see if you'd responded.

    Anyway, thanks for all your help so far Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Didn't seem abrupt. Yes MS

    Didn't seem abrupt.

    Yes MS Expressions are one method of dealing with this, bear in mind that they won't validate in the stylesheet if that matters hide them in their own file wrapped in MS conditional comments.

    I think that you need to use document.documentElement.clientWidth though, not .body. as that was for quirks mode in standards mode documentElement is required.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    A clarification to my

    A clarification to my comment re documentElement in expressions, as I was not 100% sure whether I was talking sense.

    in quirks mode document.body.clientwidth is the window width for IE5+ and for IE6, in standards mode IE6 swaps to the body for the width (IE5 will stay with window as it can't render in standards mode).

    With documenElement IE6 in standards mode takes the window width and IE5+ wont register so it looks as though document.body is the best option

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I changed it to

    I changed it to document.document, however IE7 now comes up with the security bar saying that the site is trying to run ActiveX controls :/ I'll have to have another mess around I suppose, or is there a way to make IE understand simpler width properties?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    The problem is only with IE

    The problem is only with IE <= 6. IE7 does understand the rather useful min/max properties.

    You'll need to hide the expressions from IE7 using star selector filter or conditional comments targetting IE6 and below.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I'm at college now where

    I'm at college now where they run IE 6.

    The code I posted before, the expression for IE, I put that into a new CSS document called IE.css and put this conditional comment in the head:

    However in IE6 it still moves the floats around when i resize.

    Also, I was running IE7 at home, that seemed not to understand the min and max, although I can't be sure on that.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    No you need [if lte IE 6

    No you need [if lte IE 6 ]

    less than or equal to IE6

    IE7 does understand min max dimensions..

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    ah right... yeah, but thats

    ah right... yeah, but thats still not working. I think its something with the IE.css

    This is the exact code in there:

    .container {
    width:expression(document.body.clientWidth < 550 ? "998px" : "100%" );
    }

    I'm wondering what may be conflicting with it. I have a width attribute in .container in my regular css... will that affect it, do you think?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Your CC call should come

    Your CC call should come last, it might otherwise be being overwritten. "auto" might be better than "100%"

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    Right, home now and its

    Right, home now and its displaying in IE7 and FF fine, I made the change to auto like you said and the CC was last anyway. Since I have no access to 6 I'm going to have to assume for the time being that its displaying OK.

    I've just got to putting it live, my friend has graciously hosted me at http://dan.digitalmedia-designs.co.uk ... and I am including a script called cutePHP, you're probably familiar with it. In my template I have it as before, apart from at the bottom of the item block I included a class of "floatright" for the comments. This is appearing, bizarrely, a way down the page.

    I checked the validator and I got some strange results it wasn't bringing up before - http://validator.w3.org/check?uri=http%3A%2F%2Fdan.digitalmedia-designs.co.uk%2F

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Try swapping your DTD for

    Try swapping your DTD for this one:

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    thanks hugo, had I missed

    thanks hugo, had I missed part of the URL?

    Now that my page is valid my only problems are with my template... if you're familiar with cutenews heres mine:

    {title}

    {short-story}
    [com-link]{comments-num} Comments[/com-link]

    Basically, all that should do is fill in the item boxes. The problem is with the comments link - it appears down the page rather than in the comments box (in FF at least)

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Change the comment element

    Change the comment element to

    .floatright {
    text-align:right;
    margin-top:1em;
    }
    

    but rename it to something a little more meaningful such as 'comment'.

    You must at some point start to describe your content in a semantic manner using approriate tags, your .item should contain paragraph tags to hold the text and you must start to loose the br tags (I'm not sure what's going on with that text but it's confusing me)
    create a class called something such as 'story_box' to hold each instance of a 'story' or 'Item'. .itemhead should be a heading tag or more adventurous a dt (dl list) tag with the story text held in paragraphs within the DD tag .

    Your links such as 'rec reading' and 'latest addit' should be list links ul li elements or again you could use a dl list if a ul list then 'rec reading' can be a heading tag just before the start of the list.

    You need to avoid the overuse of divs which carry no semantic meaning in favour of semantic elements such as ul lists which can be styled every bit as easily as divs, in fact they have a better structure to style coming with their own wrapping container in many cases

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    Right, the comment link is

    Right, the comment link is sorted... I should have seen to use text-align instead of float, I'm kicking myself now. There was already a class called "commentslink", I intended to use that seperate to the right float, however since the code was the same as of my last post, I just used the floatright class.

    My plan in my original designs was to make the Rec. Reading etc UL lists with a similar style to those at the top of the page (when a link is mouse-over, the corresponding section of the border, as well as the text glows) but when I started hitting the other problems I quickly scrapped that.

    I will probably start a new doc with just that in and try and work it out, but I don't want to put it in my code just yet as I think it's working OK.

    I'll also have to look into the DT/DL tags, are they styled similarly to UL Links?

    Edit - I had a quick look at the template and I've got that into a dl list. It was a lot easier than I thought.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Honestly you'll find that

    Honestly you'll find that those changes I mention are not that difficult and won't take much time, and your page code will start to make more sense.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Now you'll see that with the

    Now you'll see that with the use of the dl list for the stories you have an extra 'container' in the dl element that can also be styled and provides the block as it were for each individual story entry.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    Yeah, the dl definitely did

    Yeah, the dl definitely did help. The live code is up-to-the-minute, and I'm trying to implement a hover link effect with the recommended reading section. However, as you can see the padding isn't quite working out, and when I try to include parts to change the border colour, it sticks in an extra border. Do you know of a way to change just the section of the border in line with the links, or is this straying into too difficult/not valid territory?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    I'm afraid that you will

    I'm afraid that you will need to be much clearer on what you're trying to do with the borders at the moment what border are you trying to change the colour of I don't see the border type or width anywhere

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    on the link lists, such as

    on the link lists, such as recommended reading, down the left hand side of the screen, I want to create a flat border down the side, but when a link is mouseovered, the link changes colour as well as a change in the border next to it (which would change colour and size). I've attached a screenshot that I made in photoshop.

    Also, I can't seem to see why there is such a gap between the border and the text of the rec_reading section (the one I have updated to a UL)

    AttachmentSize
    grab.jpg 48.07 KB
    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I've been working on it in a

    I've been working on it in a document on its own so I can focus - here's what I have so far, hopefully you'll be able to see what I'm trying to achieve (and probably where I'm going wrong Tongue).

    I tried with a border-left in the initial "reclinks" section, but when I added properties to the reclinks li a it made 2 borders, 40px apart.

    Thanks so far, and for anything else you can help me with

    - Dan.

    Edit ... helps if I include a link eh? Smile

    http://digitalmedia-designs.co.uk/left/left.htm

    http://digitalmedia-designs.co.uk/left/left.css

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    Give this a go , it's a

    Give this a go , it's a quick re-working of your test case for those links:

    div#reclinks {
    	margin-top: 20px;
    	margin-left: 40px;
    	clear: left;
    	width: 30%;
    	float:left;
    	font-weight: bold;
    }
    div#reclinks ul {
    	margin: 0;
    }
    div#reclinks li {
            border-left:1px solid #0D5BE5;
    	list-style: none;
    	margin:0;
    	}
    div#reclinks li a {
    	text-decoration: none;
    	font-weight: bold;
    	color: #0D5Be5;
    	padding-bottom: 1px;
    	padding-left: 15px;
    }
    div#reclinks li a:link {
    	color: #0B5BE5;
    }
    
    div#reclinks li a:visited {
    	color: #0B5BE5;
    }
    div#reclinks li a:hover {
            position:relative;
    	border-left: 4px #F6A71E solid;
    	color: #F6A71E;
            padding-left:11px;
    }
    
    .sidebar_titles {
            
            padding-left:.2em;
            border-left: 1px #0D5BE5 solid;
    }
    

    As for the gap between the heading and the first link get rid of this

    Which you must stop doing, as apart from anything it has me perplexed and wasting time wondering where the gap is coming from, why put it in? it's not valid code as such.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    I know, I apologise for my

    I know, I apologise for my confusing use of br's, just old habits die hard. I put that in to create the gap, more to establish the top line/title of each section as a header. I'll have to look if theres a more efficient way of doing this, I know.

    Your code works a treat, thankyou so much. Out of curiosity, what difference does the "em" make in the padding sections?

    In fact, forget that I'll just do the google work, I can't expect you to explain everything Smile

    Thanks again, Dan.

    edit: Of course! Putting a padding-bottom in the sidebar_titles class! It's so simple!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    You can use padding or a

    You can use padding or a margin to create the space, important thing to always remember is that if you are effecting the presentation of elements(styling ) then it's all through CSS.

    EM is a relative computed measurement based on font-size so if font size increases then so does that value in proportion, sometimes this is desirable (often) sometimes not as you find gaps increasing to the point that they look wrong you have to decide and test (note I haven't tested that it was thrown together Smile )

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    It very nearly works, but

    It very nearly works, but there seems to be some inconsistency between IE and FF... if I add/remove a margin, then it will display correct in either FF or IE, but not in the other one.

    For instance - if I leave a margin in, it all displays inline with the other sidebar elements in IE7, but nudged over 40px in FF. If I take it out, the IE version is knocked 40px to the left.

    The only other slight problem is that, instead of the whole border changing its more like an orange block stuck to the border... If you test the live version I think you will see what I mean.

    If you could help me with this I would again really appreciate it, but it's probably about time I left you alone Tongue thanks again for all the help so far.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    both browsers use different

    both browsers use different approaches to the default indenting of ul/ol blocks IE uses margin-left and Firefox uses padding left so the trick is to cancel one out and specify the other so that all browsers are forced to use your choice. So in there somewhere are still some default rules at play which need to be got rid of

    The border you will have to play with at the moment it's on the li elements if you want to change it you could attach an on hover :hover to the lists li:hover and change to match the anchor change this will work in IE7 and all others, not though in IE6 which needs the hover.htc file to enable hover on all elements, or try and move the blue border to the anchors then you will need to reduce the padding I used to stabalise the anchor text shift.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    onlydan
    Offline
    Regular
    Last seen: 6 years 25 weeks ago
    Joined: 2007-01-23
    Posts: 43
    Points: 0

    found it - there was a

    found it - there was a margin: 0; attribute in a redundant div#reclinks ul selector that was causing the problems. I think the CSS side of the site, outside of styling the themes is pretty much done.

    I'll have to go through and add some descriptive commenting and change some style names so I know whats what, if you have any other tips for someone thats eager to master CSS (however far off I may be yet) I'd really appreciate it.

    Other than that, many thanks for the help you've given me here, you have my full gratitude for your help. I just hope someday I'll be able to help people out the same as you've helped me Smile.

    -Dan.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 1 day ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    There are a few things that

    There are a few things that you'll need to sort out firstly a method for fixing the min-widths for IE <= 6 and an hover.htc file for IE6 to enable the li:hover.

    I would also look at the .header rule display:inline and the .inline div, are these necessary? display:inline for the header should be pointless, why change it's display? and the .inner div ought to be redundant really.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me