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 15 of 15
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need to get rid of gaps between navigation buttons.

    Hello folks,
    I'm pretty new to CSS. Just taught myself about 2 weeks ago and I'm trying to overhaul my current website.
    I've run into some problems with my navigation sidebar. I had to use gifs because there is a drop shadow involved.
    See my original:
    http://www.aliciastrose.com The original layout was done with tables.

    Now my revamped css page looks like this:

    http://www.aliciastrose.com/z-mirror-site/home.html

    See the gaps?

    Here's my css code:

    http://www.aliciastrose.com/z-mirror-site/alicia.css

    What's going on? What am I missing?
    Am I allowed to eliminate a margin on inline elements?
    I need to get rid of those gaps because the drop shadow looks pretty cruddy.

    Thanks,
    Alicia

    PS also discovered that on IE the gaps are there even on my current page which does [B]not/B] show the gaps in Firefox, Safari and Camino or Netscape.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there laughhearty,

    and a warm welcome to these forums.

    try adding this rule to your stylesheet...
    Code:
    
    #navbar img {
        display:block;
     }
    
    coothead

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Coothead,
    You ROCK!

    and so does this forum.
    That worked splendidly!

    http://www.aliciastrose.com/z-mirror-site/home.html

    I can see I'm going to learn a lot from all of you!

    Alicia

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Now work on getting the rest of your valid coding wise. You currently have 25 coding errors.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by laughhearty
    That worked splendidly!
    If you're interested in knowing why that worked, there's an explanation here: http://developer.mozilla.org/en/docs...ysterious_Gaps
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay,
    _aerospace_eng,
    I'm down to 2 errors: "border="0" is not an acceptable attribute
    and align="left" isn't acceptable


    But these last two are tenacious. Here's what happens:

    http://www.aliciastrose.com/z-mirror-site/home.html

    When I take out the border="0" from the first image in the navbar div I get a border around that image. I was able to take away that attribute from all the others and they look fine. I don't get it?

    And the align="left" taken out affects the positioning of my letter el gif. It's too high and not left of the "ight".
    Looks like I might have to absolute position it or is there something else I can do and still keep it in the same div?

    Everything should look like this:

    http://www.aliciastrose.com


    Thanks,
    Alicia

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    They're not valid because they're deprecated (obsolete) thanks to CSS; use the equivalent CSS. The border property replaces the border attribute and text-align or float replaces the align attribute.

    Resources:
    border: http://www.w3schools.com/css/css_border.asp
    text-align: http://www.w3schools.com/css/pr_text_text-align.asp
    float: http://www.w3schools.com/css/pr_class_float.asp
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I'm Valid!

    Hello Folks,
    just wanted to let you all know, I've passed validation with this page:

    http://aliciastrose.com/z-mirror-site/home.html

    I figured out the last two bugs. Didn't know about a float within a float. Discovered it by accident. So got the first letter L positioned properly and put
    "border: 0px" on the navbar img selector.

    Couldn't have done it without you guys and others out there on the www.

    Now can someone tell me how this looks on IE?
    I'm using mac and IE abandoned us in January...
    Is there somewhere on the net where I can get a simulation of what my site looks like in IE?

    Thank you so much,
    Alicia

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm what resolution did you design the site on? You do realize not everyone has the same resolution as you. I have about 300px of horizontal scroll in FF and IE. I'm on a 1024x768 res. In IE for PC there is an image in the top right corner that doesn't seem to match the colors of the rest of the site. Try www.browsershots.org it takes a few days for results but its free. www.browsercam.com isn't free but the results are almost instant. Your CSS is invalid.
    Code:
    #header1 {
    	float: right
    	width: 396px;
    }
    should have a ; after right but if you add it, that breaks your layout. Try this for the relevant CSS
    Code:
    body {
    	margin: 0px;
    	color: #851913;
    	font-family: Arial, Geneva, Verdana, sans-serif;
    	font-size: 85%;
    	line-height: 145%;
    	background: #FBF2E3 url(images/home/lines.png) repeat-x;
    }
    #header1 {
    	float: left;
    	width: 396px;
    }
    #header2 {
    float:right;
    	width: 354px;
    	z-index: 99; 
    }
    That gets rid of the horizontal scrollbar in IE and FF. It was that 500px right padding you had causing the problem. You also don't need values on 0 units in CSS unless its line-height.
    Attached Thumbnails Attached Thumbnails Need to get rid of gaps between navigation buttons.-blah.jpg  
    Last edited by _Aerospace_Eng_; 05-03-2006 at 08:40 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A woman's work is never done....

    I'm valid on the html side of things.
    Forgot to check that CSS.
    The 300 px horizontal scroll is intentional. See, my boyfriend wrote the code for my original site and he was so proud that the two horizontal lines seemed to go off in mock infinity no matter how far the browser window was stretched. I tried to simulate that affect. Because personally, I like the lines leaving the window.

    So this is what I did:
    I floated header 2 to the right.
    Created a background image for header2 and had it repeat horizontally to the right, so that it would continue off into "infinity".
    I think when I made the background image the colors were off. Created the image in Gimp, the others were created in Photoshop. Also saved it as a ping and not a gif. Don't know if this affects anything.
    I managed to submit the page to browsershots.org and I'll be able to check it out...

    I am viewing mainly in FireFox. I have Safari, Camino and Netscape and they all looked fine.

    I had a feeling IE would cause a problem. Murphy's Law...

    Alicia
    Last edited by laughhearty; 05-03-2006 at 10:34 AM.

  • #11
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Duh

    Okay,
    now I know why there's no ";" after float right. I took it out in order to test my layout without the float and kept everything else just incase it didn't work.
    I don't think that's a good idea in the future....

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sighs. I gave you the fix for getting rid of the horizontal scrollbar AND having the horizontal lines repeat to infinity. Did you not even try the CSS I gave you? And yes IE displays the colors of pngs slightly darker than in other browsers.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, _Aerospace_Eng,
    No sighs!
    I'd love to try your code. I suppose I didn't quite get it that you were helping me to get what I was after!
    I'll go try it right now...I personally don't like the scroll bar...
    Thanks for the png info. I'll change the image to a .gif

    Alicia

  • #14
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fabulous

    _Aerospace_Eng,

    You are the man!
    Thank you! it looks great.
    But haven't checked it in IE. Waiting for browsershots.
    Has has the png damage disappeared?

    Alicia

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Your page looks identical to me in Internet Explorer 6 and Firefox 1.5 except that there is less space between terracotta.jpg and st-rose-rgt.gif in Internet Explorer. Doesn't seem to be damaging though.

    I didn't realize that PNG images looked different in various browsers either. Just one more thing to worry about. >_<

    Resource ("PNG Is Crap: A Case Study"): http://attaboymedia.com/sandbox/png-is-crap/
    edit: Parent Resource ("Dark alpha PNGs in Safari 2"): http://www.hicksdesign.co.uk/journal...gs-in-safari-2: has some interesting replies offering some solutions to the problem
    Last edited by Arbitrator; 05-05-2006 at 03:40 AM. Reason: extended information
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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