SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    major IE problem

    hello all,

    I am trying to make a menu, in firefox it looks great, in IE all it does is list my options vertical with the correct color i want, and underlined....any ideas?


    Code:
    .menu
    {
    	background-image:url(menubgBAR.png);
    	background-repeat:no-repeat;
    	float:left;
    	width: 680px;
    	height:85px;
    	background-position: center top;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:18px;
    	padding-top:8px;
    	margin-top:50px;
    }
    .menu li
    
    {
    		list-style-type:none;
    	display:inline-block;
    	}
    .menu li a
    {
    text-decoration:none;
    	color:#08ff19;
    	padding:17px;
    }
    .menu li a:hover{
    	background-image:url(menubgSMALL.png);
    	background-repeat:no-repeat;
    	background-position:center;
    	padding:17px;
    	color:#000;
    }
    
    .menu li#l a:hover{
    	background-image:url(menubgBIG.png);
    	color:#000;
    	background-repeat:no-repeat;
    	background-position:center;
    	padding:17px;
    }
    thanks in advance

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in IE all it does is list my options vertical
    I assume you mean IE 6-7, they doesn't really support inline-block.

    with the correct color i want, and underlined...
    Odd if there is no other css around?

    More can be told I think if the posted css is completed with the html.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is an alternate to inline-block??


    HTML
    Code:
    <div class="menu">
    
      <ul>
    <li><a href="#">Hire Me</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">About Me</a></li>
    <li id="l"><a href="#">Contact Me</a></li>
    </ul>
    </div>

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hansman
    what is an alternate to inline-block??
    You have to make a compromise.

    - I case the inline align properties are essential you can use inline and loose the dimensions control.

    To get the same actual display in this case, test to just change inline-block to inline.

    - In case the block length properties are essential you can use float and loose the aligning control.

    And I guess you want the length control:
    Code:
    .menu {
    	background: url(menubgBAR.png) no-repeat center top;
    	float: left;
    	width: 680px;
    	height: 85px;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	padding-top: 8px;
    	margin-top: 50px;
    }
    .menu li {
    	float: left;
    	list-style-type: none;
    }
    .menu li a {
    	text-decoration: none;
    	text-align: center; /* instead of center-spacing by side paddings */
    	color: #08ff19;
    	float: left;
    	padding-top: 17px; /* top padding with a height is more consistent then with a bottom padding */
    	width: 136px;
    	height: 39px;
    }
    .menu li a:hover {
    	background: url(menubgSMALL.png) no-repeat center;
    	color: #000; /* only what is changing from before on hover needs to be declared */
    }
    .menu li#l a:hover {
    	background-image: url(menubgBIG.png);
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    inline-block in IE6/7 only apply if the element existing already was an inline element to start with. Aka <a> or <span>. If you want inline-block to work you can just use a conditional comment to feed IE6/7 the element display:inline and then inline-block will work

    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    /*Items here to be set to display:inline*/
    </style>
    <![end if]-->
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •