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
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
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
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.
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
ok Tom I think the gap is caused by this line: <td rowspan="2" width="1" bgcolor="#ffffff" height="2773"> </td> Try changing to a more suitable height
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.