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
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post

    IE problem with width and min-width

    Ok. I know that IE6 doesn't recognize min-width and supposedly treats width as a min-width, expanding as it needs. My problem is that I want a min-width for my menu bar. In Firefox, of course, this min-width works just fine but I can't get a workable hack in IE to work. Here's what I have...

    My css file...
    Code:
    /* Stylesheet for Oasis Gaming USA website */
    html, body {
    	margin: 0;
      	padding: 0;
      	width: 100%;
    	min-height: 100%;
    	font-size : 100%;	/*Enable font resizing in IE*/
       background-color: #ffffff;
    	color : #000000;
       text-align : justify;
       font-family : Verdana, Arial, sans-serif;
       height: 100%;
    }
    html>body {
    	font-size: 9pt;	/*Resets font size for non-IE browsers*/
    }
    h1 {
    	font-size: 1.3em;
    }
    h2 {
      	font-size: 1.2em;
    }
    h3 {
      	font-size: 1.1em;
      	font-weight: normal;
      	text-align: center;
      	display: block;
    }
    p {
    	margin : 5px 10px 10px 10px;
    	padding : 5px;
    	clear : both;
    	display : block;
    }
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: right;
    }
    #menu li {
    	float: left;
    	position: relative;
    }
    #menu li ul {
    	display: none;
    	position: absolute;
    }
    #menu li>ul { /* resets top and left for non IE browsers */
    	top: auto;
    	left: auto;
    }
    #menu li:hover ul, li.over ul {
    	display: block;
    	background-color: #15483a;
    }
    #menu a, #menu a:active, #menu a:visited {
        width: 9em;
    	 padding : 0;
        color: #d2bc2d;
        text-decoration : none;
    	 font-weight: bold;
    	 font-size: 1em;
    	 display: block;
    	 text-align: center;
    }
    #menu a:hover {
        text-decoration : none;
    	 background-color: #d2bc2d;
    	 color: #15483a;
    }
    #page {
      	margin: 0 auto;
      	padding: 0;
      	width: 90%;
    	min-height: 100%;
      	background-color: #ffffff;
      	position: relative;
    }
    #header {
      	margin: 0 auto;
      	padding: 0;
      	width: 100%;
      	height: 168px;
    }
    #logo {
    	margin: 0;
    	padding: 0;
    	width: 159px;
    	height: 102px;
    	float: left;
    	margin-top: 5px;
    	margin-left: 40px;
    	display: inline;
    	background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
    	position: relative;
    	z-index: 100;
    }
    #menu {
    	margin: 90px 0 0 0;
    	padding: 5px;
    	height: 15px;
    	background-color: #15483a;
    	position: absolute;
    	z-index: 1;
    	width: 100%;
    	min-width: 850px;
    	left: 0;
    }
    * html #menu {
    	width: 850px;
    }
    #content {
    	margin: 0;
    	padding: 0;
    	width: 70%;
    	min-height: 100%;
    	float: left;
    	/* border: 1px solid red; */
    }
    .articleTitle {
      	font-size: 1.3em;
      	font-weight: bold;
      	text-align: left;
      	padding: 5px;
    }
    .article {
      	margin: 0;
      	padding: 5px;
      	font-size: 1em;
      	text-align: justify;
      	clear: left;
    }
    img#cabinet {
      	margin: 0;
      	padding: 0;
      	float: left;
      	position: relative;
    }
    #right {
    	margin: 0;
    	padding: 0;
    	width: 25%;
    	min-height: 100%;
    	float: right;
    	border: 1px solid blue;
    }
    #footer {
      	width: 100%;
    	height: 26px;
      	margin: 10px 0 0 0;
      	padding: 0;
    	clear: both;
    	font-size: .8em;
    	background-color: #15483a;
    	color: #d2bc2d;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
    .copyright {
    	margin: 0 0 0 5px;
    	padding: 0;
    	position: relative;
    	top: 5px;
    }
    ul#footnav {
    	margin: -5px 0 0 0;
    	padding: 0;
    	list-style: disc;
    	float: right;
    }
    ul#footnav li {
    	float: left;
    	position: relative;
    	width: 8em;
    }
    ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
        width: 8.5em;
    	 padding : 0 0 0 .5em;
        color: #d2bc2d;
    }
    ul#footnav a:hover {
        text-decoration : none;
    }
    As you can see I've tried the IE hack of * html #menu { width: 850px; } but IE still isn't recognizing that. Of course I have IE7 beta 2 installed rather than IE6 so there may be problem there, I don't know.

    By the way, the link to the website where I'm testing this out is...http://www.oasisgamingusa.com/testlayout/index.php

    Also, does anyone know why in IE my footer doesn't appear at the bottom of the screen but in FF it does? I want it to look like it does in FF.

    Thanks

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Paithar View Post
    As you can see I've tried the IE hack of * html #menu { width: 850px; } but IE still isn't recognizing that. Of course I have IE7 beta 2 installed rather than IE6 so there may be problem there, I don't know.
    Internet Explorer 7 RC1 is supposed to support the minimum height property; you're using an out-dated version. The solution you proposed should work in Internet Explorer 6, however. Also:

    • The star-HTML exploit does not work in Internet Explorer 7.
    • The child selector (>) exploit does not work in in IE7 either because it now supports that selector.
    • If you want to serve IE-specific code, use conditional comments instead of CSS exploits.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hey thanks for the quick reply, I really appreciate it.

    So IE7 RC1 is supposed to support the various min- attributes? That's nice to know. I also didn't know that the two hacks I've been trying to use don't work in IE7. I'll try using conditional comments and see what happens.

    I have another question however. I have a #contect div and #right div but they are currently completely separate of each other. Would it be recommended to put some kind of wrapper div around those two divs and give it a min-width? I've been playing around with min-width and what not and I found out that if I give each of the #content and #right divs a min-width and then shrink the browser window, the right div (since it is floated to the right) ends up going down and below the #content div and I don't want this to happen.

    I'll play around with a wrapper div and see what happens but I was just wondering if that's what most other web developers do, put a wrapper div around their main content area.

    Thanks

  • #4
    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
    The container div or your 'page' div is usually what most developers do. They put a min-width on the whole layout. IE6 does support expressions so you could use some js to fake min-width, however if you don't have to use JS don't. I found this method here to work quite well for IE6. View the source, mainly the conditional comments.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Once again, thanks for all the help and info. I think I'm actually getting this stuff figured out!

    I've still got a couple of minor things to figure out but at least I've got this min-width problem corrected. I've got it so that in both FF and IE7 the layout has a min-width of 900px. Don't ask me how I came up with that width for a minimum. It was just off the top of my head.

    Anyway, I still have to figure out why IE7 doesn't have the footer at the bottom of the screen like FF. I also need to figure out why the paragraph doesn't appear next to the cycling images in IE7 but they do in FF.

    I'll continue to play around with it but if you have any ideas on either of these problems I'd appreciate being pointed in the right direction.

  • #6
    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
    Its your conditional comment. Its being fed to IE7 as well. It should be given to IE6
    Code:
    	<!--[if lte IE 6]>
    		<style type="text/css">
    		#outer { padding-left: 900px; float: left; }
    		#inner { margin-left: -900px; }
    		#container { position: relative; width: 100%; }
    		#content { width: 630px; height: 100%;}
    		#right { width: 225px; }
    		</style>
    	<![endif]-->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks once again. I initially tried out making that style section for IE6 and below but it didn't really seem to do anything. Then I remembered that I was running IE7 Beta 2 so I upgraded to IE7 RC1 and it looks good for the most part.

    For some reason my paragraph isn't appearing to the right of the cycling images. The clear: left isn't doing the trick. Other than that it's looking good thanks to you _Aerospace_Eng_.

  • #8
    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
    You don't want clear:left; you want to remove clear:left. clear:left; tells the element to not allow anything to the left of it which is why they go to the bottom.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok so I had that mixed up. I thought clear: left was to tell it to clear anything on the left, thereby allowing it to print next to something like an image. At anyrate, for some reason only the h1 header ended up going up next to the cycling images. The paragraph didn't go up there.

    Now for some reason I do know that earlier when I had the paragraph in a span tag rather than a p tag, in FF at least, the paragraph would go up next to the images but if I have it as a p tag it prints below. Any idea on why that is?

  • #10
    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
    You've set all of your paragraphs to clear:both; again you don't want that. I'll leave it up to you to find out where you set it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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