Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Alignment issues with floating lists over backgrounds

    Ok, I'm at my wits end -- I've been trying to get this to work for the longest time to be met with this one irking problem.

    site: http://www.buckeyeakpsi.com

    this website is one i've been working with for the past few months. I've gotten the sheets pretty much ready to go except one stupid quirk:

    If you'll notice, the 'members entrance' link is lined up perfectly with where I need it to be. However, the main site links are not lined up. However, when I go to view it in dreamweaver, both lists line up perfectly with what I want. Basically the 'ul.top' is what is giving me fits.

    HELP!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have you tried

    *{margin:0;
    padding:0;
    }

    at the very start of your css. It resets all the margin and padding to zero.
    Gives an even starting point to all browsers. It certainly makes a difference on my PC.

    (Using Firefox and Firebug.)

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I plugged that in to my 'sheet... but do I need to call it up in the HTML? I have the container set up to have no margin or padding itself if that makes any difference.

    Did it fix the issue I had, or did it make things slightly better?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It should be the first item in your css. The diferrent browsers set off with a different starting value, and what values you use, will often be added to the starting value (the default for the browser)

    Starting the css with
    *{margin:0;
    padding:0;
    }

    gives all the browsers a level playing field.

    It may mean that you have to modify what you yourself have selected for a div, but at least all the browsers will get the same instruction.

    HTML does not need to be altered for this extra css.

    ALSO You do not have a DOCTYPE, This should be your first line of code.
    See the "Sticky" at the head of the CF page.

    Try this.

    ul.top {
    padding: 0;
    margin: -5px; - adjust as needed
    list-style-type: none;
    left: 200px;
    }

    It works for me.

    http://www.exitfegs.co.uk/atestb.htm with Doctype added.

    Also, look here. http://exitfegs.co.uk/Sources.html


    Frank
    Last edited by effpeetee; 01-23-2008 at 04:35 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Frank,

    Thanks for your help but I'm still having some issues.

    The issue i'm having the most problem with is the div/ul tag "top"

    When you preview in IE/Safari, the tag renders correctly in relation to what I have set it to in design view in Dreamweaver.

    However, Firefox (the usual culprit) is not displaying it properly, I adjusted the margin to -11 and it is still slightly off of what is projected in Dreamweaver by a few pixels. However, the 'members' tag has never had this issue.

    I'm just trying to figure out why the tags would come up in two different places in two different browsers, yet a similar tag never has this issue

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by fcrock View Post
    Ok, I'm at my wits end -- I've been trying to get this to work for the longest time to be met with this one irking problem.

    site: http://www.buckeyeakpsi.com

    this website is one i've been working with for the past few months. I've gotten the sheets pretty much ready to go except one stupid quirk:

    If you'll notice, the 'members entrance' link is lined up perfectly with where I need it to be. However, the main site links are not lined up. However, when I go to view it in dreamweaver, both lists line up perfectly with what I want. Basically the 'ul.top' is what is giving me fits.

    HELP!
    you have invalid markup, no doctype and no title, encoding declaration.

    http://validator.w3.org/check?verbos...yeakpsi.com%2F

    fix them and post further problems if you need.

    PS: you can move all your inline style into a external css file and add in front the global reset, as in previous replays, but you must use link element in html to use them.

    best regards
    Last edited by oesxyl; 01-27-2008 at 10:47 PM.

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I've updated the webpage

    However, I'm still having the same issue with Firefox.

    Again, the "Members" link at the top remains stationary in the editor, and displays the way I want it to in both browsers.

    However, the bar of links does not display properly in Firefox... but does in IE.

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by fcrock View Post
    Ok, I've updated the webpage

    However, I'm still having the same issue with Firefox.

    Again, the "Members" link at the top remains stationary in the editor, and displays the way I want it to in both browsers.

    However, the bar of links does not display properly in Firefox... but does in IE.
    you still have the same problem, invalid markup:

    http://validator.w3.org/check?verbos...yeakpsi.com%2F

    in abssence of valid code, browsers show what guess you want to do.

    best regards

  • Users who have thanked oesxyl for this post:

    fcrock (03-20-2008)

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Apologies for the bump, but despite all of my efforts I am STILL having the exact same issue with aligning the two list items with the background images

    I fixed every issue too

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by fcrock View Post
    Apologies for the bump, but despite all of my efforts I am STILL having the exact same issue with aligning the two list items with the background images

    I fixed every issue too
    something is wrong, you still have invalid markup:

    http://validator.w3.org/check?verbos...yeakpsi.com%2F

    it's a guess:
    Code:
    <ul style="position: absolute; left: 200px; top: 170px;" class="top">
    remove the yellow parts

    and probably you want to reduce this value to about 150px.
    Code:
    ul.top {
    left:200px;
    list-style-type:none;
    margin:0pt;
    padding:0pt;
    position:absolute;
    top:164px;
    }
    I hope this help.

    best regards

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Without a Doctype and the initial

    * {
    margin: 0;
    padding: 0;
    border: none;
    }


    It is impossible to get it right.

    You need to use these and then re-position the menu to where it should be.
    Any other course of action will lead to it being right in one browser and wrong in others.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I probably should've mentioned that the test link is now

    http://www.buckeyeakpsi.com/tsb55.html

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You still do not have this

    * {
    margin: 0;
    padding: 0;
    }


    at the START of your CSS.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    You still do not have this

    * {
    margin: 0;
    padding: 0;
    }


    at the START of your CSS.

    Frank
    Ok, I added this and it DID make a difference to some of the worsening alignment issues that had occured because of the error check, but i'm now back where I started

  • #15
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by fcrock View Post
    Ok, I added this and it DID make a difference to some of the worsening alignment issues that had occured because of the error check, but i'm now back where I started
    you don't need to add a div like this:
    Code:
    <div class="*">
    ..
    the "*" from:
    Code:
    * { margin: 0; padding: 0; }
    means "any element". Remove/rename the class or div if you don't need it.

    I'm not sure that I could help you if you fix the markup errors, but this errors make me imposible to see what's wrong.

    http://validator.w3.org/check?verbos...m%2Ftsb55.html

    the solution from my previous post work for original link, with all validation error, I test it. On this new link I see you make many changes. Try to don't add unnecessary markup css and/or html if you don't need it because this make hard to find and fix the problem.

    best regards


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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