1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

FireFox/IE formatting incompatibility help needed.

Discussion in 'HTML & Website Design' started by schsym, Jul 5, 2007.

0
  1. #1
    On my website, I have several graphic squares (100x100 pixel jpg images), each with a hyperlink to a product group.

    To make it dynamically change the number of squares on a line depending on the cell width so that it will fill a line with squares, I found out that I must seperate each graphic with a space. If I don't seperate with a space, however many I place next to each other is how wide the cell will be, but if I place a space in between images, it seems to be treated as text and will dynamically fill the line width in that cell.

    This only seems to work in IE. When viewed in Firefox, I get a single column of squares. How do I fix this?
    Thanks for any help ahead of time!
    sche maticsym bol.com/products.htm
    (delete spaces within schematic and symbol)
     
    schsym, Jul 5, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Maybe it would work better without tables, and in CSS. In html you could merely have a list of a href images which are clickable, and in CSS state where they sit within your container (the main cell of your current page). They could be all relative to each other too as you add or delete images/links.

    But I'm still new to this.
     
    Stomme poes, Jul 5, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I can't figure out what's doing that, but from what I CAN see I have one piece of advice: Throw it all out and start over with Semantic markup, separation of presentation from content, etc, etc.

    EVEN AS a table based layout, I'm seeing NOTHING that should take more than two tables - you've got 9. THIS:

    <td valign="top" colspan="2" style="word-spacing: 0; text-indent: 0; line-height: 100%; vertical-align: baseline; font-size: 8pt; float: left; position: relative; left: 0; right: 0; border-style: solid; border-width: 0; margin-left: 0; margin-right: 0; margin-top: 0">

    I don't even want to know what you are trying to do with all that nonsense. You've got declarations that don't even EXIST in HTML (valign on a TR?!?) improper and unneccessary use of classes, a javascript menu that does not degrade gracefully in non javascript browsers, and image replacement scripts that are more 1997 than 2007.... and whatever back-end you are using that's making all those webbot comments needs a swift kick in the kiester too. On top of which approaching 450k in size, almost two minutes load time on dialup users BEFORE we figure the handshaking for pings into the equation, the page is almost unusable on BROADBAND on size alone.

    You've got easily two to three times the code you should have for such a simple layout - I would not silver bullet fix that, I'd start over.
     
    deathshadow, Jul 5, 2007 IP
  4. haipravu

    haipravu Peon

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi all, hope i m posting my ques under write category..
    I am using Clip property of CSS to crop my image. I am using this property in my HTML code as follows:

    <html>
    <head>
    <style type="text/css">
    img
    {
    position:absolute;
    top:100px;
    }
    </style>
    </head>
    <body>

    <img id="img1" border="0" src="logocss.gif" width="95" height="84" style="clip=rect(0px,50px,50px,0px)"/>

    </body>
    </html>

    Now the problem that i am encountering is this above code works fine in internet explorer but it is in not working in Mozilla and Opera...any pointers to this problem? How can i achieve same functionality in these browsers.IS there any syntax issue?
     
    haipravu, Jul 5, 2007 IP
  5. schsym

    schsym Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks deathshadow for your insight. I'm a newbie at this and to start out, I downloaded a cheap template and use FrontPage as the editor, so you may be saying 'no wonder' at this point (among other things). Although not opposed to learning, I had to start somewhere. Can you recommend a good reference and toolset along the lines of what I need to know...? Do you think there is something to try in the short term to fix this mess?
    Thanks!
     
    schsym, Jul 5, 2007 IP
  6. dylanbathurst

    dylanbathurst Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well first off what would work better is if you put the all the styling code in one place instead of some css in the top img tag and some in the bottom img tag. Just to clean things up. Also for best results open the picture up in photoshop or some image editor program and manually crop it. This will make it compatible across all browsers, and the css rendering load will be smaller, since you won't have to use css to crop the image.
     
    dylanbathurst, Jul 5, 2007 IP