CSS issue in FF and IE

Discussion in 'CSS' started by technomotice, Feb 16, 2009.

  1. #1
    A friend asked me to look at the css issues he is having with this site, it does not display properly in ff or IE

    www.computersupportgroup.co.uk

    i have looked but can't see a problem with the code,

    any ideas



    cheers
     
    technomotice, Feb 16, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What problems is he having, he could improve his code by using other elements instead of tables for the layout, and also by using CSS rollovers rather than JS rollovers
     
    wd_2k6, Feb 16, 2009 IP
  3. technomotice

    technomotice Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    the pages just won't display properly and i can't see why..

    I'm not to hot on css myself. I'm not familiar with css rollovers. can you see a problem? what part of the code needs to change to sort out the way it displays?

    cheers
     
    technomotice, Feb 16, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    When you say the pages just won't display properly, what part in particular are you reffering to, i don't know what the page is meant to look like in the first place so I cannot decide what is wrong and what is right if you understand me.

    CSS Rollovers have the advantage that they would work when the user has JavaScript disabled, and also use less code and therefore improve loading times. I can show you how to use them if you require.
     
    wd_2k6, Feb 16, 2009 IP
  5. technomotice

    technomotice Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi thanks for the reply,

    The pagea are supposed to look like this

    http://www.computersupportgroup.co.uk/Services.html

    but all the other pages appear like this

    http://www.computersupportgroup.co.uk/index.html

    with a gap between the header and the flash banner and the main txt

    some pointer with css rollovers would be great also

    cheers

    tom
     
    technomotice, Feb 16, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ok Tom I think the gap is caused by this line:

    <td rowspan="2" width="1" bgcolor="#ffffff" height="2773">&nbsp;</td>

    Try changing to a more suitable height
     
    wd_2k6, Feb 16, 2009 IP
  7. technomotice

    technomotice Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    cheers, i think thats sorted it

    thanks for your help
     
    technomotice, Feb 16, 2009 IP
  8. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ok, it's probably better to use DIV's rather than tables to control your layout as it offers more flexibility so for example:

    <div id="wrap">
    <div id="header">header goes here</div>
    <div id="content">content goes here</div>
    <div id="footer">footer goes here</div>
    </div>

    Then you can easily control each element with CSS (heights widths colors gaps borders fonts etc..) and reduce your HTML markup.

    As for CSS rollovers you can basically do something like this:

    <a href="mylink.htm" class="rolloverLink"> MY LINK TEXT</a>
    and then the CSS for this would be:

    .rolloverLink { background:url(linktohoverimage.jpg); height:50px; width: 300px; }
    //You'd change height and width to image height and width.
    .rolloverLink a:hover { background:url(linktoimageonhover.jpg); }

    We can improve this further but that is the basic CSS rollover, what it does it change the image on hover.
     
    wd_2k6, Feb 16, 2009 IP
  9. technomotice

    technomotice Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    nice one, I'll look into that 2moro. cheers for the help btw
     
    technomotice, Feb 16, 2009 IP