www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Cross browser Problem...

  1. #1
    Join Date
    Oct 2005
    Posts
    9

    Cross browser Problem...

    Ok so I've been having troubles view this on site correctly on different browsers. I designed it in deamweaver with firefox in mind. So the site was working fine in firefox but was not working right in Safari or IE. I have been working on, changing the div configurations and changing the image slices around and I have it working properly now in Firefox and Safari but IE is still a no go. Can someone please explain how I can make the site work properly in all 3 browsers. The url is below:

    http://www.urbanstreetannouncement.c...SusFuture.html

    Also, for some reason the font is different in IE as well, which I dont understand why.

    Thanks,
    Cesar
    http://www.urbanstreetannouncement.com

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Please fix your HTML errors.

    IDs should be unique. You could use a class instead.

    Code:
    <link rel="stylesheet" href="crstyle.css">
    should be
    Code:
    <link rel="stylesheet" type="text/css" href="crstyle.css">

  3. #3
    Join Date
    Oct 2005
    Posts
    9
    Ok thanks for the tip, but that did not solve the problem with the layout in IE. Also where should I been using classes instead of ID's, the text? Sorry if these are "simple" question but Im new at CSS.

    Thanks again for the help,
    Cesar

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    For example, you have more than one element with the "h3" ID. You should use a class instead of an ID for those elements.

    Validating doesn't always fix problems, but it does rule out X/HTML errors as the cause of the problem.

  5. #5
    Join Date
    Oct 2005
    Posts
    9
    Ok so I changed the IDs to Classes but it did not solve to DIV position problem in IE : _ ( I do not undestand this, IE browser basically sucks but I want know how to fix this problem. Sorry if I am being annoying with this problem.

    Thanks for the help,
    Cesar

  6. #6
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Did you try the !important hack?

  7. #7
    Join Date
    Oct 2005
    Posts
    6
    You may need to use some validators W3C validator , or smart validator from :

    http://www.smartvi.com/sec.htm

  8. #8
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    In IE 6._, it looks like "spacer.gif" is causing the big problem -
    or maybe IE is choking on the margins:
    #Spacer {
    width: 86px;
    height: 4px;
    margin-top: -207px;
    margin-left: 610px;
    background-image: url(spacer.gif);
    background-repeat: no-repeat;
    }

    Also noticed that the white text on blue is hard to read & gets cut off -
    and the 'more' links in the green boxes are not uniform in spacing.
    Good start of your design, though.

    El

  9. #9
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Well one problem in IE is caused by it wrongly not allowing elements to have a height less than the line-height.

    Code:
    #Spacer	{
    	width: 86px;
    	height: 4px;
    	font-size:3px;
    	line-height:4px;
    	margin-top: -207px;
    	margin-left: 610px;
    	background-image: url(spacer.gif);
    	background-repeat: no-repeat; 
    	}

  10. #10
    Join Date
    Oct 2005
    Posts
    9
    Ok Kravvitz thanks for the input so far, I tried adding those two lines of code and now the Spacer div will not show in IE, still works fine under Firefox. Any other suggestions?? Would you think reslicing it a different manner would work?

    Thanks again,
    Cesar

  11. #11
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You're welcome

    The problem in IE is caused by the height of #Content.

  12. #12
    Join Date
    Oct 2005
    Posts
    9
    Ahh, that makes so much sense. Because in firefox the text is within the content box but IE it overflows so it probably messes up the hieght which in turn messes up the positioning of the boxes to the right of it.

    Dude thanks again Ill have to work on it when I get back from work today,
    Cesar

  13. #13
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You're welcome

    Actually, it overflows in Firefox too. Firefox just handles overflowing text differently than IE -- IE wrongly expands the container.

  14. #14
    Join Date
    Oct 2005
    Posts
    9
    Ok sweet, thanks to Kravvitz help I was able to make the layout work both in Firefox and IE. The problem was that the text was overflowing and the SPACER div needed the font-size and line-height code. I also got ride of some float attributes. But I still have another question : ) So I changed the font type and size to fit IE but the main Content box still display the text in different sizes. Is there a script code maybe that I can use to resize for the browser or should I just play around with different fonts until one works in both??

    Thanks again everyone. This has help me out a great deal understand how exactly CSS works.

    Cesar

  15. #15
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    *sigh* Making the font size smaller is a bad solution. The web is not print. People are free to change the font size to whatever they want. You need to design layouts that can accomodate more than just the font size you set.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles