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.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical/horizontal alignment, CSS

    Two Issues:

    The alignment of the menu items.

    First, I had to use a negative value to align these horizontally. And the vertical alignment is different in IE vs. FF. The way it appears in IE is where I want it placed vertically.

    #navlistdiv {position: absolute;left: -22px;top: 72px;z-index: 2;}
    How would I place them horizontally without using a negative value, and get the same results in IE & FF vertically?

    Second, the background aligns in IE, but not in FF. Link below:


    http://www.ekigroup.com/temp/veProto.html

    How to fix this?


    The entire CSS:

    html, body {margin: 0px;padding: 0px;background: url(images/bg3.gif);}
    #bgImg {position: absolute;left: 50%;width: 758px;height: 650px;background: url(images/veProtoDrop.gif);margin-left: -379px;}
    #navlistdiv {position: absolute;left: -22px;top: 72px;z-index: 2;}
    #navlist li {display: inline;list-style-type: none;text-align: left;font-family: arial;font-size: 11px;color: #000000;}
    .mainnav {text-decoration: none;color: #000000;}
    Any help is appreciated.



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jamescover
    The alignment of the menu items.

    First, I had to use a negative value to align these horizontally. And the vertical alignment is different in IE vs. FF. The way it appears in IE is where I want it placed vertically.

    How would I place them horizontally without using a negative value, and get the same results in IE & FF vertically?
    I have had similar problems before, and as far as I can work out this seems to be caused by IE interpreting margin values in a different way to other browsers.

    It often seems to ignore margin settings applied to body and html.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sayonara
    I have had similar problems before, and as far as I can work out this seems to be caused by IE interpreting margin values in a different way to other browsers.

    It often seems to ignore margin settings applied to body and html.
    Thanks for responding.

    Can anyone propose a solution? Especially, to the second [vertical alignment] issue.



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As for the navigation I think it may have something to do with the different default margin and padding browsers apply to lists (and other elements).

    To keep things consistent across browsers it can help to set both margin and padding to zero and adjust from there. If you let different browsers apply their own default values it can have unpredictable results.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you attempting to center the background image?

    If so you can do something like this... give your body text-align:center; this will center it in IE. Then give your bgImg div text-align:left; and margin:0 auto;.

    The text-align:left; is to override the text-align:center; of its parent and margin:0 auto; gives top and bottom zero margin while the auto centers bgImg horizontally in standards compliant browsers.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mcdougals4all
    Are you attempting to center the background image?

    If so you can do something like this... give your body text-align:center; this will center it in IE. Then give your bgImg div text-align:left; and margin:0 auto;.

    The text-align:left; is to override the text-align:center; of its parent and margin:0 auto; gives top and bottom zero margin while the auto centers bgImg horizontally in standards compliant browsers.
    mcdougals4all:

    Thanks for responding!

    I already centered the background image using a negative margin. That's not an issue.

    I had already set my body margin and padding to 0 as well. I added auto to that, but it didn't affect the layout.



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "


  •  

    Posting Permissions

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