View Full Version : help with cross browser support

07-26-2007, 04:09 AM
I'm developing this page on a mac and am trying to solve some problems with how things are displayed across major browsers (MAC: firefox, safari PC: firefox, IE) I'll list some of the issues of seen below:

IE on the PC is a mess. I think it has something to do with the shadow I recently implemented on the content area. The shadow overlaps the patterned background on the right and bottom of the content area.
Firefox on the PC and mac aren't too bad but, I noticed that the bottom left below the content area where I have a png file to soften or ease the shadow is pushed way too far to the right and gets worse as the page expands. The softening should happen just below the lower left corner
Safari on the mac isn't showing the softened edge in the lower left corner. If I add "float:left" to my ".shadowWrapperEase" class it gets fixed in Safari but then Firefox gets really screwy.
Lastly I'm fairly new at writing semantic code, how have I done with this page? I know there are quite a few of extra divs. These are mainly for creating the shadow on the content area and creating the two peices for the background tiles.

Any help would be awesome! I've been working really hard at getting this page right and am just sort of stuck right now.

Sample HTML page (http://projecto3.com/clients/test/index_test.html)

CSS (http://projecto3.com/clients/test/stylesTest.css)

07-26-2007, 04:42 AM
Changing your doctype from a transitional one to a strict one may fix some of your issues.

07-26-2007, 02:18 PM
Well I changed the doctype to to " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" ><html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >" but it doesn't seem to make any difference.

I guess I'm not real sure about what that would do either. Can you explain doctype a little bit? Strict vs. transitional...

07-26-2007, 02:26 PM
Well I changed the doctype to to " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" ><html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >"

Where did you get that? :confused: It's totally wrong, this is what you should be using if you want to use XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And only this is the doctype. The <html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en"> is not part of the doctype. You can read about it in the sticky here: http://www.codingforums.com/showthread.php?t=18346

07-26-2007, 05:55 PM
thanks for the info. I apologize for not searching the forum first on the doctype.

Any further thoughts on my issue from the begining of the post? I'm not seeing an improvement with the correct doctype.

07-26-2007, 07:38 PM
Well, I found one of my issue was coming from the shadow image. Dumb me only made the image 950px wide when I need to make it more like 1500px so when the browser window expands the image is revealed. that pretty much resolves issue 2 & 3 while leaving issue 1 in much better shape but there seem to be some issues with the left & bottom padding on the contentWrapper ID. Oh yeah the news image in the side bar is sill messed up. Any thoughts on these couple issues I have left?

by the way here is my correct css to fix firefox and some of the IE issues (adding a width and floating left seems to have helped):

background: url(images/common/shadow.png) no-repeat right bottom !important;
background: url(images/common/shadow.gif) no-repeat right bottom ;
position: relative;
float: left;
width: 100%;

background: transparent url(images/common/shadowEase.png) no-repeat left !important;
background: transparent url(images/common/shadowEase.gif) no-repeat left top;
position: relative;
float: left;
width: 100%;

07-26-2007, 10:10 PM
What version of IE is the problem in?

07-26-2007, 10:14 PM
IE 7 but I think I have nearly fixed the issue. or at least I'm getting very close...

07-26-2007, 10:40 PM
okay I do have one issue I seem to one last issue.

I'm using the following css to create a left hand column that extend beyond my div. The problem is that the column isn't lining up prefectly accross all browsers. Safari mac & pc is perfect, ff mac & pc is off by about 1 or two pixels, ie 7 on the pc is off by a couple of pixels also. ANy thoughts on how to correct the issue?

position: relative;
display: block;
margin: -5px 5px 5px -5px;
padding: 0 4px 4px 4px;
background: white url(images/common/fauxColumn.gif) repeat-y 30% 0;
border-left: 1px solid #838383;
border-bottom: 1px solid #838383;
border-right: 1px solid #838383;
width: 100%;

here is the testing page (http://projecto3.com/clients/test/index_test.html)

07-26-2007, 11:06 PM
Well I went in and altered my background image to solve to problem. 30% of my image should have been 600px exactly, but since that didn't seem to be working I went in and made a one pixel adjustment to 601px which works well on everything except IE 7 so then I made an IE specific image by adding another pixel to the blue column in my background image. This seems to have solved the problem for pretty much all the browsers I was looking at. I'm not sure how older versions of IE will work... Oh, safari on the pc seems to be off by a pixel, but I might have to live with that unless some has an idea...