Grow your CSS skills. Land your dream job.

IE and Firefox image position

  • # March 26, 2009 at 1:04 am

    I have a webpage that I am using CSS and I can’t get an image to line up properly in Firefox 3.0.7 What I want is a graphic menu bar on the left side, a top bar, a main content below the top bar, and a right bar with a picture in it. I have it all set up and in IE 7.0.6 it works perfectly, in Firefox the image is at the bottom of the page. I want it to be at the top. Here is the code:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    content="text/html; charset=iso-8859-1"/>


    alink="#000099" link="#000099" vlink="#990099">

    style="width: 150px; height: 196px;"
    alt="Dr. Claw Oriental-japanese art"/>
    style="width: 150px; height: 5px;"
    alt="psycho city tattoo- lancaster palmdale california"/>
    style="width: 150px; height: 5px;" alt="Japanese artwork"/>
    style="width: 150px; height: 5px;" alt="exotic tattoo"/>
    style="width: 150px; height: 5px;" alt="clawtattoos.com"/>
    alt=""/>

    CLAWTATTOOS.COM

    Psycho
    City

    This is where I did the majority of my training under Mike Pike, Jo Jo
    Akermann and Shad, a.k.a. Hori Tsuki Kage
    Shad’s (Hori Tsuki
    Kage)
    Web Page

    A good site with large oriental pieces
    Ignition Tattoos
    A shop that produces some great, more traditional, artwork
    Ink Impact Studios Web
    Page

    A studio I like to hang out when I am in Belguim.
    Outlaw Irons Web
    Page

    One of the better places for Tattoo Machines and parts
    Royal Tattoos Web Page
    Another Studio I like to hang out at when I am in Denmark
    Strange World
    Tattoos
    Web Page

    Another Studio I like to hang out at when I am in Canada
    My Myspace Web
    Page

    Just my hang out


    Rob
    # March 26, 2009 at 8:45 am

    Gotta say dude – its a bit of a mess, if I correct one thing other things are gonna need fixing, might be better to start again… if I have some time a little later I will go over it… :)

    # March 26, 2009 at 5:24 pm

    I can’t think of a better way to accomplish what I want without the mess. I hope you get a chance to look at it! Thanks in advance

    Rob
    # March 26, 2009 at 5:32 pm
    "poporacer" wrote:
    I can’t think of a better way to accomplish what I want without the mess. I hope you get a chance to look at it! Thanks in advance

    Do you have a mock up in Photoshop or anywhere an image that you are working from? :) Is the site live yet, would be easyer to see the pictures and stuff :)

    # March 26, 2009 at 7:11 pm

    Yes- the webpage is clawtattoos.com/links.html …. I know this has a bunch of things in their, a bunch of it is to keep compatability with all browsers (as much as possible). Thanks for loooking at it!

    Rob
    # March 26, 2009 at 9:16 pm

    Ok dude.. I just spend the last 40mins digging through your code lol – and decided it best to scrap it all and write it so you can see how it should be writen…

    I replicated what you had as much as possible…

    Enjoy!

    Website demo: click

    Files: click

    P.S. you owe me a pint. :P

    # March 26, 2009 at 9:18 pm

    I figured it out! There was an extra bracket that was throwing the code off. I appreciate taking the time in looking at it!!! These things bug me and I keep looking and looking….this time I found it!!!

    # March 26, 2009 at 9:27 pm

    Rob,

    THANKS!!! Your code is WAY cleaner!!! However the menu bar in IE does not show properly :( There are gaps between the graphics…. Where do I send the pint???? It would be nice if your code would work….I will look at it and if you get a chance to look at it, I will send 2 pints!!!

    Again, Thanks a billion!

    Rob
    # March 27, 2009 at 3:26 am

    well tbh – its not the best way to lay out a menu – you should make the sprites include the spacer :) – I shall update…

    *Fixed btw…

    # March 27, 2009 at 7:25 pm

    Thanks!!! It looks great!!!
    You are awesome

    Rob
    # March 28, 2009 at 4:38 am

    nice – glad I could help :) now learn from the code I did and you can lay out the rest of your site like that :D ;)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".