Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts

    help with cross browser support

    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:

    1. 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.
    2. 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
    3. 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.
    4. 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

    CSS

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Changing your doctype from a transitional one to a strict one may fix some of your issues.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by po3 View Post
    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? It's totally wrong, this is what you should be using if you want to use XHTML:

    Code:
    <!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
    .
    .

  • #5
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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.

  • #6
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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):
    Code:
    .shadowWrapper{
    	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%;
    }
    
    .shadowWrapperEase{
    	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%;
    }

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What version of IE is the problem in?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    IE 7 but I think I have nearly fixed the issue. or at least I'm getting very close...

  • #9
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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?

    Code:
    #contentWrapper{
    	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

  • #10
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •