|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: cross-browser problem
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 10
|
|
| Author |
|
beskone
Stranger Portugal Joined: Dec 15, 2008 Post Count: 7 Status: Offline |
hi, this is my first post here. i'm in trouble with a website that i'm testing, and i hope that you guys can help me. it's driving me crazy i did everything i know. it's hosted on http://beta.ses-electronic.com/ when i put it working on IE it doesn't work on safari nor firefox and vice versa. it's something with the links on the images and the css involved. thanks in advance. |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Seems to be working fine in Firefox to me (though I still need to look at it in IE). One quick comment: -- It would help if your page had a doctype -- might help with display issues ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
It breaks in IE and yes...as suggested by Ben, throw in a DocType at the very beginning of your html codes. Use the following: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
As falkencreative says, add this at the very top of your html page before the <html> tag:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Table layouts with image slices are terribly difficult to correct for errors; who is going to check if rowspan="18" should be 17 or 19? However, I can see that IE7 is showing spaces in the left menu and I've cured the first one for Home by adding valign="top" in several places:- <tr> <td colspan="3" rowspan="14" "valign="top"> <img src="images/site_reflexo_sliced_2_09.jpg" width="40" height="408"> </td> <td colspan="2" rowspan="2"><a href="index.php" onMouseOver="mouseOver1()" onMouseOut="mouseOut1()"><img border="0" style="boder: 0;" src="images/site_reflexo_sliced_2_10.jpg" name="b1" width="170" height="64" alt="" style="margin-top: 0px; ></a></td> <td rowspan="16" valign="top"> <img src="images/site_reflexo_sliced_2_11.jpg" width="40" height="447"> </td> You need to add valign="top" for the other menu buttons. boder:0; above should be border: 0; That still left a small space which I cured by adding this into your stylesheet.css:- img { margin: 0 0 -3px 0; padding: 0; } The above style would be better if it was in a conditional comment for only IE as it will cut the bottom off the images in Firefox if coded in the stylesheet but I have done it the quick way to see if it had an effect. I have only shown you part of the cure, but it has closed the gap in IE7 for the Home button. I hope you realise that table layouts with image slices are out of date now, if you use divs and css you can leave an image unsliced and layer other images or text over the top. Images for menu buttons can be useless as screen readers for blind people have nothing to read unless you add a title and if someone has images turned off they won't show at all. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
beskone
Stranger Portugal Joined: Dec 15, 2008 Post Count: 7 Status: Offline |
hi thank you all for reply i tried what you said, done the conditional comment and all, but all i could do was to mess the rendering in safari and firefox too (because of the doctype). the modified version is hosted at beta.ses-electronic.com/index_cross.html thanks again |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
To be completely honest, I don't think you are going to be able to fix this. I don't think I could fix it, if I was in your situation. The mess of tables that Photoshop's "Save for Web" feature (I'm assuming that's what you are using, or something very similar) generates is very hard to fix. Basically, what you'd have to do would be go through cell by cell, and set heights to each of the cells so that the images within the cells display correctly. The difficulty is that since there are so many cells, and adjusting one cell will probably adjust others, it would take a long time to do. If I were you, I'd go back to Photoshop, start with a freshly coded version using Save to Web, and copy/paste your changes from the old to the new. ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
beskone
Stranger Portugal Joined: Dec 15, 2008 Post Count: 7 Status: Offline |
yep you are right, i done it with photoshop. i'll go back to photoshop and try to start with a cleaner code. i'll let you know how everything went. thanks a lot |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
As a side note, perhaps you don't have to do this immediately, but it really helps if you know how to hand-code a layout, rather than using Photoshop's Save to Web feature. You'll have cleaner, easier to maintain code, especially if you are using a CSS/div based layout rather than tables. ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
beskone
Stranger Portugal Joined: Dec 15, 2008 Post Count: 7 Status: Offline |
hi again. i already export to divs. and it seems to be working ok. but the images with 1px height don't render. its hosted at beta.ses-electronic.com i cant detect anything wrong. about what you said about learning how to code properly, i'm a begginer at css so its gonna be a step by step progress =) |
||
|
|
beskone
Stranger Portugal Joined: Dec 15, 2008 Post Count: 7 Status: Offline |
everything it's working fine now =) i added some align="top" |
||
|
|
|
|
Current timezone is GMT Mar 21, 2010 8:55:03 PM |
