SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BR tags not working in IE

    Hi all,

    I am working on an eBay Store template for one of my clients, as a result of the environment In this instance am coding the template in Quirksmode.

    My client has asked me to repoduce the menu found on his eCommerce Website into his eBay store, something of which I have no problem doing accept for IE which is giving me greif.


    The html of the menu us thus, where 'NAME' appears directly below 'PRODUCT':

    HTML Code:
    <ul class="menutabs">
      <li><a href="#tab1">PRODUCT<br />NAME A</a></li>
      <li><a href="#tab2">PRODUCT<br />NAME B</a></li>
      <li><a href="#tab3">PRODUCT<br />NAME C</a></li>
      <li><a href="#tab4">PRODUCT<br />NAME D</a></li>
      <li><a href="#tab5">PRODUCT<br />NAME E</a></li>
      <li><a href="#tab6">PRODUCT<br />NAME F</a></li>
      <li><a href="#tab7">PRODUCT<br />NAME G</a></li>
    </ul>
    This renders correctly in all Browsers, accept in IE instead of seeing:

    PRODUCT
    NAME A

    I just get

    PRODUCT

    I can post the CSS as well if required, but does anyone have any idea how I might correct this? Any help much appreciated as this is an important job.


    Many thanks!!

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well from that code sample there is nothing that would cause IE to display weirdly so something else like CSS is in play so it might be apt to provide some of CSS that effects the above sample, etc.

  3. #3
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the CSS for that menu taken from my clients site (not my code). I know this problem does not occur in IE in Standards mode, but unfortantly this isnt an option!


    Code:
    .container {width: 500px; margin: 10px auto;}
    ul.menutabs {
    	margin: 0;
    	padding: 0;
    	float: left;
    	list-style: none;
    	height: 57px;
    	width: 100%;
    	margin-top: 20px;
    	border-bottom:1px solid #e6c54c;
    }
    ul.menutabs li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	padding-top: 12px;
    	padding-bottom: 10px;
    	background: white;
    	overflow: hidden;
    	position: relative;
    	text-align:left;
    	height:35px;
    }
    ul.menutabs li.tab_right {
    	float: right;
    	margin: 0;
    	padding: 0;
    	padding-top: 22px;
    	padding-bottom: 0px;
    	background: #e6c54c;
    	overflow: hidden;
    	position: relative;
    	text-align:left;
    	height:35px;
    }
    ul.menutabs li a {
    	text-decoration: none;
    	color: #76c258;
    	display: block;
    	font-size: 1.2em;
    	padding-left:11px;
    	padding-right:11px;
    	text-transform: uppercase;
    	font-weight:bold;
    }
    ul.menutabs li a:hover {
    	background: #292929;
    	border-bottom: 1px solid #292929;
    	color: white;
    	
    }	
    html ul.menutabs li.active, ul.menutabs li.active a, html ul.menutabs li.active a:hover  {
    	background: #292929;
    	border-bottom: 1px solid #292929;
    	color: #13B5E7;
    }

  4. #4
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All other browsers:

    othermenu.jpg

    IE (Quirksmode)

    iemenu.jpg

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Why are you in quirks mode for IE? Put a doctype in there! It makes browsers behave more like IE5
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I understand the need for Doctypes in webpages - eBay templates are written in quirksmode because you cant use a DTD in that environment.

    If I didnt understand rendering modes I wouldnt be working in Web Development...

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In this instance am coding the template in Quirksmode

    overflow: hidden;
    on the LI seems to be the cause of your problem while running IE in quirksmode.

    It looks like you can loose the relative positioning and fixed heights as well.

  8. #8
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post

    overflow: hidden;
    on the LI seems to be the cause of your problem while running IE in quirksmode.

    It looks like you can loose the relative positioning and fixed heights as well.
    proper job - thanks!

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnuk View Post
    Yes I understand the need for Doctypes in webpages -
    If I didnt understand rendering modes I wouldnt be working in Web Development...
    Then probably about 50 or so percent of people don't deserve to beworking then. I'm including people who do improper doctypes too
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Then probably about 50 or so percent of people don't deserve to beworking then. I'm including people who do improper doctypes too
    I seem to forget not everyone sticks to neat standards compliant code


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
  •