www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Cross Browser Compatibility

  1. #1
    Join Date
    Jul 2008
    Posts
    6

    resolved [RESOLVED] Cross Browser Compatibility

    I feel bad making a new topic about cross browser compatibility when the topic under mine is about this too. However, I'm stumped on how to work around problems with IE. I used this utility to figure out that this is a IE specific issue. I googled a specific chain of keywords to solve this problem and it landed me here.

    Onto the problem: this is the website I've been working on - http://rscstaff.penguindevelopment.o...er3/index.html

    Click the link on any browser other than IE and it renders the way it's supposed to. Open it in any version of IE and it refuses to cooperate. I've already sought advice on another forum, but they only recommended me to play with every attribute I have to troubleshoot. I'm sure there are specific CSS attributes that do not work the same in both IE and Firefox.

    I normally use Firefox 3.0 with Firebug for my web development, but it's crucial to also cater to IE users since it still holds a majority of web viewers.

    Can anyone lead me in the right direction and tell me which specific types of CSS properties are prone to operate differently in IE? It would be an even bigger help if you tried to make it 100% compatible.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    "can't copy name attribute" errors ("warnings", actually) :

    <h1><a name="07282008">Sparse farce</a></h1>

    Cannot start a name attribute with a numeral. Must be a alphabeic.

    (still checking for whatevers...)

    <img
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Strict" height="31px" width="88px" />
    "px" is CSS. height="" is HTML. Remove the "px" (several instances of this). Or, use style="height:31px" (called "inline-CSS")

    ...

    I'm also showing a runtime error (javascript). I do not know enough javascript to be helpful here, but see screenshot image. -This might be of some use to anyone more familiar with *js

    ...
    in your CSS:
    #mainbody h1 {
    color:#401D1A;
    font-size:1.75em;
    margin:0pt 0pt 5px;
    padding:0pt;
    }

    #mainbody h3 {
    font-family:Times New Roman;
    font-size:9pt;
    font-style:italic;
    margin:5px 10px 0px 30px;
    }
    It is generally not a good idea to 'mix-n-match' values this way (pt, px, em, ex, in, cm, etc) although here, "zero" equals any other "zero" so the point is moot. But it can save you troubles to only use one 'flavor' of measure and stick with it for that Declaration.

    Also, the font-family here reads "times" "new" and "Roman". Unless you mean "Time New Roman" (quote around multiple words, else, it means second, third choice).

    ...

    I note several instances of
    padding:0pt; margin:0pt;
    and you very last entry in the external CSS is the "universal selector"

    * {padding:0; margin:0;}

    which over-rides all these others, making them redundant and useless. They do no harm. They just add to the weight of the CSS file. every instance of "padding:0pt; margin:0pt;" can be safely removed, if you retain the * {padding:0; margin:0;}, as it is global.

    ..
    now, probably somewhere in here I brushed up against something that might be the reason this doesn't work in IE.
    One things I would do, is make your "<a>" tags be "display:block;" which causes them to 'swell-up' and completely fill the "<li>" of which they belong. -Makes the entire "<li>" be 'hot clickable'.

    P.S. :

    re:
    I feel bad making a new topic about cross browser compatibility when the topic under mine is about this too.
    No, -don't. Tacking your 'similar' problem onto another's post, is called "hijacking" and it hides YOUR request, -esp. if the OP (Original Postee) marks his/her thread "RESOLVED". Sometimes we (or specifically, me at least) won't even bother to read a post/thread marked RESOLVED and thus, your question goes unanswered...

    Also, as a 'new member', your post will probably all land in the 'Moderation Queue' for approval, -unseen by you/audience. I just cleared two of yours. -It's an anti-spam measure that, once you attain 'trusted status' (an undisclosed number of posts), your posts will automatically appear on the forum.

    Welcome to WD!
    Attached Images Attached Images
    Last edited by WebJoel; 07-28-2008 at 11:13 PM.

  3. #3
    Join Date
    Jul 2008
    Posts
    6
    Thanks for checking, WebJoel.

    I neglected to mention that a few parts of my websites are borrowed code from other places (they've been credited of course). The height/px problem is from the W3C validator: I just copy and pasted their HTML to put their validation verification box onto my website. The javascript came with the horizontal drop down menu box I found today, and lacking javascript experience as well, I don't know how to fix it.

    I was primarily looking to fix the background issue (bodybg.jpg doesn't load for the body tag), the margin issue (although it looks like it might be a margin-right issue, I'll have to play around to see), and the active scripting warning IE 6 gives when first encountering my website.

  4. #4
    Join Date
    Jul 2008
    Location
    Ottawa, Canada
    Posts
    103
    WebJoel...

    Just a note of thanks here...
    I've seen you post some ScreenHunter shots here, so I went and got the free one to try it.
    Love it! May just upgrade to the Pro.


    McShieldSniper...

    for IE bugs:
    HOLY! CSS ZELDMAN is a great place to start for many CSS & HTML subjects
    and
    Position Is Everything deals with many IE bugs.
    Last edited by eloquentBohemia; 07-28-2008 at 11:15 PM.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Screenhunter ROCKS!

    -It's late here... I'm going to bed.. Zzzzz

  6. #6
    Join Date
    Jul 2008
    Posts
    6
    Thanks for the inputs and I'll look into fixing those problems tomorrow. Sorry about the multiple posts. I moderate another forum (100k+ active members) so I was aware of the automatic post hiding function. I think I might have use my browser to go back a couple of times, resulting in the multiple posts.

    Will update with details. Thanks for the insightful help again.

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    With 150px side margins (both sides), your header div is too wide for the container - decent browsers will allow the overhang, but IE6 will push the container wider. Remove the right margin :
    Code:
    #header {
    	border-bottom-style:dashed;
    	color:#000000;
    	margin:100px 0 20px 150px;
    	padding:0pt;
    	text-align:left;
    	width:600px;
    }
    The background image loads fine for me with IE6 & 7 ...

    Not sure about the javascript either ...

  8. #8
    Join Date
    Jul 2008
    Posts
    6
    *facepalm*

    Centauri caught the problem of the wide header that I missed: one look with the Firebug tool made it obvious. Thanks for that.

    As for the background and active scripting problem, it seems like it only happens when the website is viewed from local files. Once it's hosted, the problem is gone. Odd.

    Anyway, I'll clean up my code but all the problems I've addressed have been fixed, therefore this topic is resolved. Thanks a lot to everyone who replied!

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