SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quirky layout issues yet again...

    After a great conversation with csswiz, Paul O'B, and Dan Brown, I was told to ask for help and not waste time recreating the wheel...

    I could REEAAALLLLYYYYY use help on this.

    I can't figure out two things on one of my personal sites; www.coosbaytv.com.

    1) the white border around the box is funky at the bottum and right hand side in FF and worse in IE6. The purple box at the bottum is supposed to be inside the white border.

    2) in this specific example, what are the quirks that are inherent in IE6? The purple box is contained here but to the right of it is extra white?

    Need to get my head wapped around this...

    Thanks, Jay

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got a link to a picture layout ? I can help you with this.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    semantic7:

    thanks for the offer of help but I'm not sure what you mean by a "picture layout".

    Jay

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main problem is that you're using absolute positioning and then expecting different elements to sit nicely within each other.

    You'll be much better off using float's and margin/padding for achieving something like this.

    There's a simple CSS 2 column layout here which you may find useful

    2 column CSS layout

    And Paul's got loads of useful examples available here which you may be able to use

    http://www.pmob.co.uk/

    Also, you should get away from using tables for layout and from relying on Dreamweaver to apply styles.

    Styles applied with id="layer5" or class="style13" aren't going to mean much to anyone so it's much more benficial to name things depending on what they do.

    id="navigation" or class="error-text" will make much more sense to you later.

    Also try and get all presentational code into CSS. There's no need to be applying width's, height's, border colour's or background colour's etc within your HTML code.

    Also http://validator.w3.org is well worth using to ensure that all the code you're using is actually valid.

    Hope that helps.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz:

    thanks again for the feedback.

    Once again the magic of DW and Layers has caused havoc with me and I have started to find many tutorials on CSS layout by learning CSS rules. These tutorials are going into floats and margins and padding. My ultimate goal is to get away from DW Layers completely unless I want an Absolute Positioned element and know the why and how of that rule.

    What I am learning is that trying to go back and revise these mish-mashed sites is painstaking.

    I guess what would be best is to just delete that entire area and create a new Div and replace all my elements.

    Thanks, Jay

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what the goals are of these sites as I'm guessing that you're trying to go back and improve them?

    What I'd personally do is leave them, put it down to experience and start afresh with a new site or start one of these again from scratch and try and code them using semantic HTML and CSS using float's to position elements wherever it's required.

    Unfortunately we've all been there where we've created a website that we were happy with only to look back a few years later and ask ourselves "what were we thinking?", especially with the switch from table-based layouts to CSS.

    The good news is that whilst a lot of so called designers are happy to stick with what they know and just get by, it does sound as though you're looking to learn and have the right attitude... stick with it as practice is obviously what will help you improve.

    If you start from the beginning of making a page though and ask questions as to how to mark something up from scratch then I think you'll have much more luck than attempting to put in fixes for a site that Dreamweaver has put together.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz: the site that I am referring to is less than 6 months old and hasn't really even been launched yet.

    Yes, I want to tweak and correct the issues that are at this point stopping me from making the site public, like the issue of the white border that is supposed to contain the image elements. I am aolso going to remove the image banner of the white flowers from the upper area of the page.

    Quite honestly, I am at the point that I am learning so much so rapidly that I have to draw the line somewhere and just get this stuff done! That may mean, that there are some bugs, but bugs the general public aren't aware of.

    This site happens to be one of my own that I built in DW as a test to see "how to build a site". And yes, my attitude to to learn to correctly create these sites to the best of my ability without beating my head against the wall in the process.

    Now, as far as DW goes, I found some great tutorials on CSS that use DW almost exclusively in code view. Are you saying that even that can cause bad code?

    Thanks, Jay

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dreamweaver as a tool isn't bad, I personally use it on some projects as I like the integration with the FTP client so using code view certainly isn't bad on it's own.

    The only thing I would say is that it encourages users of the software to develop bad code without actually realising.

    It's the same as any HTML or text editor. In the right hands it can create valid accessible websites but in the wrong hands, even notepad can create bad code if the user doesn't understand HTML and CSS.

    If you're looking for a quick fix for the white box problem then I suspect you could fix it by altering the height value on the #Layer5 div within the CSS

    Code:
    height:635px;
    If you increase this then it will fit the content but keep in mind that this won't be flexible should you add more content or if a user of the site increases the text size.

    I'm not sure exactly what is causing the problem in IE6. It could be due to a bug although there are quite a lot of conflicting styles so it would take a while to debug. Using medium for the borders is bad practice as different browsers will interpret this differently so using px for this would be better.

    I may have some time in the morning to put together a sample page for you of this page which you could use as a template for this if that would be helpful?

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz:

    NOW WE ARE GETTING SOMEWHERE!

    1) Please DO NOT waste your valuable time on a template mock up. Let me run with the advice you have given and see if I can now fix this.

    2) As a short timer on this forum, I can already see that there are folks here that just want you to fix their problem for them for free...
    This is the age old "give them a fish or teach them to fish" question.

    3) I appreciate this specific response because you are teaching me to fix this problem as well as to not re-create it in future projects.

    4) FYI, if I can get this corrected this week, I can finally start to promote it locally and sign up advertisers.

    Thanks, Jay

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries. I don't like to do quick fixes usually though as I can obviously anticipate the problems they're likely to cause.

    Specifying a height on any element (apart from IE6) will mean that if you add to that content later or if text is increased in size then the content will flow out the box.

    You could use min-height for modern browsers and then apply a hack for IE6 (as it treats height as min-height) but I'd always prefer to create the content so it just flows and the parent container can expand to cater for the content. Something which isn't really achievable easily with absolute positioning and is why float's are the preferred method.

    Hope that helps. I've no problem pointing people in the right direction or helping people to a certain extent for free but it's more guidance to set people along the right path than to throw quick fixes their way. As your "teach them to fish" anaology explains, we could be here all year fixing people's bad code but explaining what is wrong with it, in the hope that next time they don't go down the same path is much more rewarding


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •