SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can't get around conflicting CSS for menu

    hi, i am having problems with my nenu (horizontal menu with horizontal submenu). i did it seperately and it worked fined on IE and FF. however, once i've embedded it on mysite it appears not styled at all , eventhough, i have the css in place. Also. on IE it looked centered but not on FF anyone knows the reason why?
    Many thanks!
    here is the link [urlwww.jcss.upfrontec.com/mysite[/url]

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    This line is killing it
    @media all and (min-width: 0px) {

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks markbrown4, killing "@media all and (min-width: 0px) {" did make the site crash on IE and will probably on Opera.
    any other idea please?
    many thanks.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I have never had to include '@media all and (min-width: 0px) {' in my CSS to make it work.. Don't include it

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks Mark. any idea on how to fix my template problem?

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    People here always want the answers

    This shouldn't be at the top of the page.. Well, I shouldn't be able to see it in the HTML anyways - it means that PHP is not working as it should.
    Code:
    <?php header('Content-Language: en'); ?>
    My advice would not to use any code/hacks that you don't understand.
    I don't understand or have had to use most of them so I can't offer a fix.
    Here it is for anyone else that want to offer some advice.
    The live site is actually at www.jcss.upfrontec.com/mysite .html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Horizontal expanding menu on a CSS line</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    
    body {
    	margin:0;
    	padding:0;
    	line-height: 1.5em;
    	background: #3e3f3a;
    }
    b{font-size: 110&#37;;}
    em{color: red;}
    #container {
    	width: 840px; /*Width of main container*/
    	margin: 0 auto; /*Center container on page*/
    	border:5px solid #FFF;
    	overflow: hidden; /* Overflow: hidden to cancel out column stretching */
    }
    #header {
    	background: #EAEAEA;
    	height: 120px; /*Height of top section*/
    }
    #header h1 {
    	margin: 0;
    	padding-top: 15px;
    }
    #upmenu {
    	background: #c0c0c0;
    	padding:0, 5px;
    }
    #wrapper {
    	float: left;
    	width: 100%;
    }
    #content {
    	margin-right: 360px; /*Margin for content column. Should be (extraWidth + navigationWidth)*/
    	background: #FFF;
    }
    #navigation{
    	float: left;
    	width: 190px; /*Width of left column in pixel*/
    	margin-left: -380px; /*Set margin to -(navigationWidth + extraWidth)*/
    	background: #aee758;
    	border-top:1px solid #626d75;
    }
    #extra{
    	float: left;
    	width: 190px; /*Width of right column in pixels*/
    	margin-left: -190px; /*Set margin to -RightColumnWidth*/
    	background: #626d75;
    	border-top:1px solid #aee758;
    }
    #footer{
    	clear: left;
    	width: 100%;
    	background: black;
    	color: #FFF;
    	text-align: center;
    	padding: 4px 0;
    	overflow: hidden; /* Overflow: hidden to cancel out column stretching */
    }
    #footer a{
    	color: #aee758;
    	float:right;
    	padding-right:4px
    }
    #footer a:hover{
    	color: #626d75;
    }
    .innertube{
    	margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    	margin-top: 0;
    }
    /*hack for faux columns*/
    #content, #navigation, #extra  {
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    /* Start Mac IE5 filter \*/
    #content, #navigation, #extra  {
    	padding-bottom: 32767px;
    	margin-bottom: -32767px; 
    }
    
    /* End Mac IE5 filter */
    #content, *#navigation, #extra  {
    	padding-bottom: 0;
    	margin-bottom: 0; 
    }
    #content:after, #navigation:after, #extra:after {
    	display: block;
    	background: inherit;
    	padding-top: 32767px;
    	margin-bottom: -32767px;
    	height: 0;
    }
    
    * > #footer, * > form, * > #notes, * > .output  /*This hack is for Opera faux columns, called, the child selector hack*/
    {
    	position: relative;
    	z-index: 1000;
    }
    
    /*End of hack for faux columns*/
    /*EOT*/
    
    /*Menu*/
    
    body {
    margin: 10px;
    padding: 0;
    font: 1em Verdana, sans-serif;
    background:#626d75;
    }
    dt, dl, dd, ul, li {
    	list-style-type: none;
    	margin: 0 10px 0 0;
    	padding: 0;
    }
    #menu {
    	position: absolute;
    	left: 50px;
    	top: 20px;
    }
    #menu dl {
    	float: left;
    	border: 1px solid #aee758;
    	padding: 0px 5px;
    	margin-right: 5px;
    	background: #aee758;
    }
    #menu li {
    	display: inline;
    	background: #626d75;
    	font: 1em Verdana, sans-serif;
    }
    #menu a {
    	text-decoration: none;
    	color: #000;
    	background: #aee758;
    }
    #menu a:hover {
    	text-decoration: underline; /*Changed from None*/
    	color: #000;
    	background: #aee758;
    }
    #smenu1, #smenu2, #smenu3, #smenu4, #smenu5{
    	position: absolute;
    	left: 0;
    	font-size: 0.9em;
    	border-top: 1px solid #626d75;
    	width: 800px;
    	color:#626d75;
    	background: #aee758;
    	padding:2px 5px;
    	margin-right:0px;
    }
    .mentions {
    	position: absolute;
    	bottom : 300px;
    	left : 10px;
    	color: #000;
    	background-color: #ddd;
    }
    a {
    	text-decoration: none;
    	color: #222;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    window.onload=display;
    function display(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div class="innertube"> </div>
      </div>
      <div id="menu">
        <dl>
          <dt onmouseover="display('smenu1');"><a href="#">Home</a></dt>
          <dd id="smenu1">
            <ul>
              <li><a href="#">Menu 1.1</a></li>
              <li><a href="#">Menu 1.2</a></li>
              <li><a href="#">Menu 1.3</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="display('smenu2');"><a href="#">About Us</a></dt>
          <dd id="smenu2">
            <ul>
              <li><a href="#">Menu 2.1</a></li>
              <li><a href="#">Menu 2.2</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="display('smenu3');"><a href="#">faq</a></dt>
          <dd id="smenu3">
            <ul>
              <li><a href="#">Menu 3.1</a></li>
              <li><a href="#">Menu 3.2</a></li>
              <li><a href="#">Menu 3.3</a></li>
              <li><a href="#">Menu 3.4</a></li>
              <li><a href="#">Menu 3.5</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="display('smenu4');"><a href="#">links</a></dt>
          <dd id="smenu4">
            <ul>
              <li><a href="#">Menu 4.1</a></li>
              <li><a href="#">Menu 4.2</a></li>
              <li><a href="#">Menu 4.3</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="display('smenu5');"><a href="#">Contact</a></dt>
          <dd id="smenu5">
            <ul>
              <li><a href="#">Menu 5.1</a></li>
              <li><a href="#">Menu 5.2</a></li>
              <li><a href="#">Menu 5.3</a></li>
              <li><a href="#">Menu 5.4</a></li>
            </ul>
          </dd>
        </dl>
      </div>
      <div class="innertube"> </div>
      <div id="wrapper">
        <div id="content"> lkjsf hiovfusadihgfsgynuiergbyiwrtfgbiiayhsg bfuygsygfsuygacg ugyuc usfufufufyu hgducytygffytrcreecrcvy ytrtcvrdc
          <div class="innertube"> </div>
        </div>
      </div>
      <div id="navigation">
        <div class="innertube"> </div>
      </div>
      <div id="extra">
        <div class="innertube"> </div>
      </div>
      <div id="footer"><a href=""> Copyright &nbsp;&copy; Upfrontec 2006 </a></div>
    </div>
    </body>
    </html>


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
  •