SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    quirks mode problem

    I have tried to fix this code, and I'm sure it's simple. The problem appears in quirks mode and I'm not sure how to handle the hacks. To see the page: http://www.logsol.lt/test_menu.html

    HTML Code:
    <quirks mode>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-13" />
    <title>test</title>
    <style type="text/css">
    <!--
    html body {
    	padding: 0;
    	margin: 20px 0 0 0;
    	font: 11px Arial, Helvetica, sans-serif;
    	color: #133258;
    	background-color: #fff;
    }
    
    #container {
    	width: 700px;
    	\width: 700px;
    	w\idth: 700px;
    	background-image: url(bg.gif);
    	background-repeat: repeat-y;
    	margin: 0;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 0
    	}
    
    #banner {
    	padding: 0;
    	margin-bottom: 0px;
    	border-bottom: 3px solid #3D72B6;
    	background-color: #3D72B6;
    	}
    
    #menu {
    	height: 18px;
    	border-top: 2px solid #fff;
    	border-bottom: 2px solid #fff;
    	background-color: brown;
    }
    
    #menuRight {
    	float: left;
    	text-align: center;
    	padding-bottom: 1px;
    	}
    
    #menuLeft {
    	float: left;
    	width: 161px;
    	\width: 163px;
    	w\idth: 161px;
    	border-right: 2px solid #fff;
    	margin-right: 0;
    	padding: 0;
    	background-color: yellow;
    	font-size: 1px;
    	}
    
    * html #menuLeft{
    width:163px;/*for ie5.x win */
    w\idth:161px;/*for ie6*/
    }
    -->
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="banner">
    
    <div id="menu">
    	<div id="menuLeft"><a href="#"><img src="contact.gif" alt="contact" width="102" height="18" border="0" style="border-right: 2px solid #fff" /></a><a href="#"><img src="languages.gif" alt="" width="57" height="18" border="0" /></a></div>
    	
    	<div id="MenuRight"><!--
    		<ul id="navlist">
    			<li><a href="#">COMPANY</a></li>
    			<li><a href="#">SERVICES</a></li>
    			<li><a href="#">PARTNERS</a></li>
    			<li><a href="#">CLIENTS</a></li>
    		</ul>-->
    	</div>
    </div>
    
    </div>
    
    </div> <!-- end of div id="container" -->
    
    </body>
    </html>
    if I use the IE hacks in #menuLeft do I still have to use * html #menuLeft hack? AND, do you see where the problem is? It can't also be 3px jog, becasue menuRight and MenuLeft are both floats. Ideas?

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll attempt to answer these questions although I might be wrong on a few.

    You don't actually have this tag at the top do you?
    <quirks mode>

    That would explain quirks mode unless I'm missing something with CSS

    As far as the hacks, why do you have this defined like so:

    \width: 163px;
    w\idth: 161px;

    But then you have the * selector below this? Dunno, strange. If I were you and I know some of the threads around here don't emphasize it, but a cleaner approach to "hacks" in CSS is to use conditional comments for IE, they are built right into IE, and they provide a cleaner solution in my opinion. You simply create an additional stylesheet and do something like:

    <!--[if IE 6]>
    Welcome to Internet Explorer 6
    <link href="styles.css" rel="stylesheet" type="text/css">
    <![endif]-->
    --!>

    Not sure on the complete syntax, google for it and you would get it. This stylesheet could contain the different widths for IE 5.5 and IE 6.

    Hope this helps a little bit.
    Ryan Butler

    Midwest Web Design

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you're coding to XHTML anyway why do you want to throw it into quirks mode? Just remove that extraneous tag from the top of your source code.

  4. #4
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the <quirks mode> is just put there to force the IE browser in quirks mode. Enything put before DOCTYPE forces browser in quirks mode. Note: be careful not putting the real HTML tags.

    As for the hacks...this is my questions...which one should be used. And in my case...none works and problem still exists.

  5. #5
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe i'm not really sure how to use the quirks mode, but since I'm using IE 6, I understood that quirks mode would show how IE 5.5 would handle the page. Good place on what is quirks mode google has it all ! Basically, that is a way for me to see how old browsers look at my page...sort of.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by janislanka
    Maybe i'm not really sure how to use the quirks mode, but since I'm using IE 6, I understood that quirks mode would show how IE 5.5 would handle the page. Is that wrong?
    It will revert to some of IE5's quirks, such as the incorrect box model and messed up font size keywords. However, most hacks targetted at IE5's CSS parser (i.e. the traditional Box Model Hack) won't work because they were fixed in both quirks and standards mode in IE6. If you want to run IE5 and IE6 on the same machine, use Multiple Explorere.

  7. #7
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has anybody tried to run that dual IE thing on their machine???...every time I mess with the big brother, I'm slapped pretty badley. Basically, bad memories of chaning something in windows.

    and let me answer some of the issues:
    wrong text size...you mean "font-size: 1px;" ? If that is not put, then I have some extra height which I don't need.

    But can anybody tell me which hack should I use. I mean, I have looked at that stupid code for a while, and I'm out of ideas..so, any help woudl be appreciated.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by janislanka
    Has anybody tried to run that dual IE thing on their machine???...every time I mess with the big brother, I'm slapped pretty badley. Basically, bad memories of chaning something in windows.
    I have it running just fine. As a matter of fact, I have IE3, IE4, IE5, IE5.5, and IE6 all running on my XP desktop at home.

  9. #9
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet. So, I checked it with IE 5.5 and it seems to be working well. Thanx Vinnie for the link on Stand Alone IE...I do wonder what Microsoft is thinking. However, it still does not show correct on IE6...so, where is the problem...what am I missing?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have a look at the FAQ thread on the broken box model which explains how to cater for the broken box model in standards mode and in quirks mode.

    In quirks mode you must feed ie6 the same values as ie5 and 5.5.

    You have this code above;
    Code:
    #menuLeft {
    	float: left;
    	width: 161px;
    	\width: 163px;
    	w\idth: 161px;
    	border-right: 2px solid #fff;
    	margin-right: 0;
    	padding: 0;
    	background-color: yellow;
    	font-size: 1px;
    	}
    
    * html #menuLeft{
    width:163px;/*for ie5.x win */
    w\idth:161px;/*for ie6*/
    }
    
    The first thing you should do is separate your ie hacks from the main block of code because other browers shouldn't be bothered with any hacks and you risk other browers getting the wrong code by mistake (even though I can't think of any that get it wrong but thats not the point ).

    So take out the backslash hacks from the main block and puthem into the star selector hack as you have done anyway!

    Now the star selector hack just affects ie so all other browers carry on regardless and unaffected. Now because you have forced quirks mode you just supply a value for all of ie without the backslasg hack that only ie understands.

    So your code for the box model hack in quirks mode should like this.
    Code:
    #menuLeft {
    	float: left;
    	width: 161px;
     border-right: 2px solid #fff;
    	margin-right: 0;
    	padding: 0;
    	background-color: yellow;
    	font-size: 1px;
    	}
    
    * html #menuLeft{
    width:163px;/*for all ie ( ie6 in quirks mode) */
    }
    
    Hope that helps.

    Paul

  11. #11
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, thanx. I'll have to figure out myself when I want to use quirks mode and when I could just go along with StandAlone old IE versions to see the potentian issues.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I should add that forcing quirks mode is ony effective for ie6 and does not force quirks mode in iemac. Therefore you will need to hide the star selector hack from ie5 mac when working in quirks mode.

    Code:
    /* commented backslash mac hiding hack  \*/ 
    * html #test {/*these styles hidden from ie 5mac*/}
    /* end hack */
    For more infor on the star selector hack see here:

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Paul

  13. #13
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it was a really awesome suggestion to check standalone IE. Is there anything on PCs (winXP) that could simulate Mac broswers?

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by janislanka
    it was a really awesome suggestion to check standalone IE. Is there anything on PCs (winXP) that could simulate Mac broswers?
    No, you'll have to run out and get a Mac or bug Mac-using friends for that. If you just want to see what the site looks like in Safari, you can use iCapture


Bookmarks

Posting Permissions

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