Results 1 to 7 of 7
  1. #1
    Join Date
    Dec 2004
    Posts
    170

    CSS Pro's, lend me your ears, err eyes.

    I'm learning CSS (well, I've got an understanding of it, let's say experimenting) and a few nights ago I had the idea to make a completely css-based design -- IE: FEW (If ANY!) TABLES!

    So I was going along, doing this and that, and I ran into a problem. I've got an image that floats right, but there seems to be two margins on the left and right of them. I've tried margin = 0, border = 0, and I just don't know what the heck is wrong!

    The website is here, and the image that's giving me all the trouble is the cow looking one.

    Feel free to look at the HTML, CSS, etc. Right now I know the HTML/CSS is messy, that's because I've been trying everything to fix this darn thing!

    Another problem is that the design is supported (aka looks good) by IE, as I haven't yet fitted it for Firefox. Is there any documentation that will tell me what exactly Firefox (Mozilla) supports?

    If you help, wife baked a fresh batch of cookies....

    Thanks!

  2. #2
    Join Date
    Dec 2004
    Posts
    170
    NEVERMIND!

    I figured out the problem. Supposedly some "3px bug" or something with IE?

    margin: -3px; did the trick!

  3. #3
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    876
    Can I still have a cookie?

  4. #4
    Join Date
    Nov 2004
    Location
    Ontario, Canada
    Posts
    633
    welcome to the world of IE bugs and hacks

  5. #5
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    You must be talking about the famous "3-pixel jog" bug in IE. The way around this is to specify a height for the element to which the margin is being improperly applied. Using -3px margin shifts the object three pixels to the side in all browsers, meaning every other browser will see it screwed up in a different way. Instead, try adding something like height:1% to the element with the extra margin. That should make the margin disappear without causing any harm to the rest of the layout.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  6. #6
    Join Date
    Dec 2004
    Posts
    170
    I read about that too, however it's not going to cause a problem.

    I'm writing the website so it automatically detects the browser, then specifies a certain css file to use...

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Just in case you're planning on doing this via JavaScript, note that this is a very unreliable method for serving up data. I've seen and had the chance to play with some PHP scripts that run a series of tests to determine what level of markup a browser can support, and in doing so, it weeds out IE (it determines whether the browser is capable of parsing XML, and makes markup adjustments accordingly, all automated). If you're using something like this, then great! Bottle it and sell it Actually don't - the script that's being created is by a friend of mine who is also a WHT member, and he doesn't need the competition

    Creating one file that works across all browsers is a better scenario than using unreliable browser sniffing to serve up the right CSS file.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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