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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Width issue in IE

    Been scratching my head over this problem for the last day or so.

    I've currently got a project template that I'd like to get to look like <a href="http://img75.imageshack.us/img75/2788/firefox3of.jpg">this</a>. (See the light blue box on the left.) However, it looks like <a href="http://img75.imageshack.us/img75/7263/ie9up.jpg">this</a> in Internet Explorer.

    I can't seem to get it to obey! I've tried a number of things.

    This is what I've got, for that portion, for CSS:

    #nav {position: relative; left: 15px; top: -12px; background: #00FFFF; margin: 0px 0px 0px 0px; padding: 0px 2px 1px 2px; width: 136px; height: 90px;}
    #list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px;}
    #list-menu ul {list-style: none;}
    #list-menu li {margin: 2px 0 0 0;}
    #list-menu a {display: block; width:120px; padding: 2px 2px 2px 10px; border: 1px solid #000000; background: #0C2E82 ; text-decoration: none;}
    #list-menu a:link, #list-menu a:active, #list-menu a:visited {color: #000000;}
    #list-menu a:hover {border: 1px solid #FFFFFF; background: #0092CF; color: #FFFFFF;}

    Any help, suggestions, and whatnot, would be helpful. I hope I'm just looking something over.

  • #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
    Padding does count for overall width so your nav is actually 134px wide plus 6 more pixels for the padding and width in the #nav CSS. Without seeing the html thats about as much help as I can give you. Make your #list-menu a a width of 108px
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    No one can really help you without the rest of your code.

    I will tell you though that default styles for HTML lists are notably different for each browser. Try putting this rule at the top of your style sheet:

    * {
    margin: 0;
    padding: 0;
    border: 0; /* optional */
    border-collapse: collapse; /* optional (for tables) */
    }

    It's the general rule I use for CSS and it'll make all those lists equal in those regards.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the code I have so far:

    <!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/html1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>
    <body>
    <div id="header">
    <div id="inheader">
    Logo and stuff located here.
    </div>
    </div>
    <div id="nav">
    <div id="list-menu">
    <ul>
    <li><a href="#">Services</a></li>
    <li><a href="#">About the dealer</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    <div id="content">
    <h2> This is copy content</h2>
    <div id="break">
    <div id="net">
    <h3>Wildblue Information</h3>
    <p>lobortis mollis. Nam tempus, diam eu auctor mollis, neque ligula sodales turpis, non porta erat sapien ut orci. </p>
    <br />
    <a href="#">More Info</a>
    </div>
    </div>
    </div>
    </body>
    </html>


    and my CSS:

    body {background: #0C2E82; margin: 0 0 0 0; padding: 0 0 0 0; border-collapse: collapse;}
    #header {height: 120px; background: #0C2E82;}
    #inheader {position: relative; left: 15px; background: #FFFFFF; height: 120px; width: 96%;}
    #nav {position: relative; left: 15px; top: -12px; background: #00FFFF; margin: 0px 0px 0px 0px; padding: 0px 2px 1px 2px; width: 136px; height: 90px;}
    #list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
    #list-menu ul {list-style: none;}
    #list-menu li {margin: 2px 0 0 0;}
    #list-menu a {display: block; width:120px; padding: 2px 2px 2px 10px; border: 1px solid #000000; background: #0C2E82 ; text-decoration: none;}
    #list-menu a:link, #list-menu a:active, #list-menu a:visited {color: #000000;}
    #list-menu a:hover {border: 1px solid #FFFFFF; background: #0092CF; color: #FFFFFF;}
    #content {position: relative; left: 174px; width: 72%; top: -69px; background: #FFFFFF; padding: 6px 9px 6px 9px; -moz-border-radius: 1em;}
    #break {text-align: center;}
    #net {border: 1px dashed #CCCCCC; width: 100%;}
    #net a {text-decoration: none; color: #FF0000;}
    #tvone {border: 1px dashed #CCCCCC;}
    h2 {text-align: center;}

    Changing the width of my Nav div, making it smaller; does not effect the view in IE, however making it larger does. I have a feeling it's got something to do with this line, however, I can't think of another way to achieve this:

    #list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

    Thanks for the tips and assistance.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Oh man, you're overcomplicating things so bad! There is no need for two additional divs around the list (<ul>). You have the <ul>, the <li>s and the <a>s to apply styles. I think that's enough to achieve what you want.
    And let me say this: Your formatting sucks. (No personal insult) You should indent every child element a little bit more. That helps you and us to see where the opening and respective closing tags are.
    I'm gonna look at your problem and post an answer in a minute (or two).

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Here we go:
    Code:
    ul {
    	list-style: none;
    	background: #00FFFF;
    	margin: -1px 0 0 15px;
    	padding: 0 2px 1px 2px;
    	width: 136px;
    	height: 90px;
    	border-top: 1px solid #FFF;
    }
    li {margin-top: 2px;}
    li a {
    	display: block;
    	width:122px;
    	padding: 2px 2px 2px 10px;
    	border: 1px solid #000000;
    	background: #0C2E82;
    	text-decoration: none;
    	font-family: verdana, arial, sanf-serif;
    	font-size: 12px;
    	line-height: 18px;
    }
    Delete your <div id="nav"> and <div id="list-menu"> (and change the CSS for the link pseudo classes). There are spacing issues with the list items so I set a line height to make it look equal without using a hack. Also I needed a top border on the list. you can see what happens in Firefox without it.

    Oh and no positioning needed. Just a left margin... you can do that to the header too.


  •  

    Posting Permissions

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