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 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Works in IE, yet not FF

    I have a site that displays right in IE, but can't get it to work in FF. The page margins are set to 0px because I know the browsers have different margins. My problem is that the middle content area doest have the surrounding spacing in FF as it does in IE. Any reason why? Here is my CSS source code.

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Go here http://www.w3schools.com/css/css_padding.asp to see how to pad correctly in CSS.

    As far as I can see, the problem is you're using the "padding" but have only defined one value, padding uses four values. So it's reading your 5px as the top padding, whereas you want it left and right. so you could use

    padding: 0px 5px 0px 5px

    or alternatively

    padding-left: 5px
    padding-right: 5px

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just to be curious, how come you are using a combination of semantic and non-semantic code?

    An empty table? Center tags on elements that you can either apply text-align: center or don't need to be centered (e.g. empty table).

    I'm not trying to roast you or anything, I'm just curious about that.

    As for the padding:
    Code:
    padding: 0 5px;

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I finally got it working! Not even sure what I did, which sucks. I just uploaded a backup and slowly tweaked. I tried changing the padding, as suggested, but that changed the padding inside the content div and the small boxes, although it solved the initial problem, thanks. So I left the padding as just 5px. As for the center tag, yeah took that out, left that in there from something else. The reason I used the table was the image. In FF it cuts the image off with different resolutions, IE uses the horizontal scroll, which messes up my css layout. I tried creating a div and placing it as the background-image, but it didn't display the whole image, just a small part of it. The table was the only work around I could find, unless you have a solution?

    Here are the two versions:
    (like how the text isn't against the edges in the first one, although it sacrifices a small amount of space for the main div)

    Mine
    All around padding

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Both look fine to me, it's up to you which look you like, good one

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Question about the table though. Will I be able to place divs on top of that? When the site goes live, I'd like to have dynamic content below and above the image in the whitespace of the image. If there is a better way to do the header with the image, that lets it span the screen, yet doesn't trigger the horizontal scroll in IE, I'd like to try it. I know you are suppose to use CSS to avoid tables, but couldn't get it working.

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I personally use CSS and tables, but if you want to disable horizontal scrolling you can using CSS. inside the body attirbute just have

    overflow-y: false

    I think it's boolean like that... Might want to double-check on www.w3schools.com

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thank you, I'll look into that.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    while your looking into things

    Your banner image I will assume was designed for 1024 resolution. I use 1152. It ends short on the right side. Kinda breaks the whole thing up. Just FYI.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!! Never would have thought of that. You, or anyone, have any suggestions for a work around? If I make it for say two more resolutions higher, I don't want it to load longer. I mean like all the content before the banner.
    Last edited by atomicnuke; 08-15-2005 at 06:13 AM.

  • #11
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    1600x1200 here, and the banner does end up on the short side.

    As for the table? Trash it. It is an empty table being use for a banner. Use either an image tag or make it a span or header or something and use some image replacement thing.

    Code:
    HTML
    <div id="banner"><span>ilovetaffy.com</span></div>
    
    CSS
    #banner {
    background: #fff url(http://www.ilovetaffy.com/testingphase/taffy3.jpg);
    width: 1024px; /*You might want to shorten up the image some*/
    height: 181px;
    }
    
    #banner span {
    position: absolute;
    left: -999em;
    }

  • #12
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you think, I should take the banner and get rid of the grey bars to the banner, meaning make it a center/header image, that way the resolution doesn't come into play as much? I just think it looks better touching the screen edges with this layout. I tried doing the div thing with the image, but it was blank, give your try a way, thanks.

    I still get the same problem with the div not showing the image.
    Last edited by atomicnuke; 08-15-2005 at 06:45 AM.

  • #13
    New Coder
    Join Date
    Aug 2005
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got it

    Ok, the div finally works for me with an image in FF and IE. But in IE it is aligned on the left, instead of being centered. Ideas?
    Last edited by atomicnuke; 08-15-2005 at 10:54 PM.


  •  

    Posting Permissions

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