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 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts

    Height and font-size don't work on IE8?

    I'm trying to make my drop menu bigger, but for some reason the size won't change. It works on Google Chrome and Firefox but not IE. I even made IE a stylesheet but still didn't work. My code

    Code:
    .test {
    position:relative;
    top:50px;
    left:30px;
    height:50px;
    font-size:15px;
    Any suggestings?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Has always worked in IE

    check this out in IE and see if you notice the increase in font size:
    Code:
    <style type="text/css">
    .test {
    position:relative;
    top:50px;
    left:30px;
    height:50px;
    font-size:15px;
    }
    </style>
    <div class="test">Hello my baby</div>
    <div class="test" style="font-size:30px;">Hello my baby</div>

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    I meant that it won't work with the dropmenu, it works with everything else.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    You should post your drop menu code with all css

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    here's my drop menu
    Code:
    <select name="engine" class="engine" id="engine" title="Choose search engine">
        <option> Choose one</option>
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="ask">ask</option>
        <option value="bing">bing</option>
        </select>

    here's the css part

    Code:
    .engine {
     height:28px;
     position:relative;
     top:-28px;
     left:392px;
     font-size:15px;
     outline:none;
     font-style:bold;
    }
    Last edited by bigcasey123; 10-06-2012 at 05:41 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    font-style:bold; No such thing. Font-styles are normal, italic, and oblique and I never could see any difference between italic, and oblique. You could use font-weight: bold;
    outline:none; is the default, so it doesn't matter (I did use outline for one dropdown)
    Had to remove top:-28px; so we could see the dropdowns
    NOTE: the top:-28px; could mean that your problem stems from the parent of the dropdown.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    .engine {
    	 height:28px;
    	 position:relative;
    	 //top:-28px;
    	 left:392px;
    	 font-size:15px;
    	 font-style: italic;
    }
    #engine2 {
    	 height:28px;
    	 position:relative;
    	 //top:-28px;
    	 left:392px;
    	 font-size:15px;
             font-weight: bold; 
    	 font-style: normal;
    }
    #engine3 {
    	 height:28px;
    	 position:relative;
    	 //top:-28px;
    	 left:392px;
    	 font-size:15px;
    	 outline: green solid 5px;
    	 font-style: oblique;
    }
    </style>
    </head>
    <body>
    <select name="engine" class="engine" id="engine" title="Choose search engine">
        <option> Choose one</option>
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="ask">ask</option>
        <option value="bing">bing</option>
    </select>
    
    <select name="engine" class="engine" id="engine2" title="Choose search engine">
        <option> Choose one</option>
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="ask">ask</option>
        <option value="bing">bing</option>
    </select>
    
    <select name="engine" class="engine" id="engine3" title="Choose search engine">
        <option> Choose one</option>
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="ask">ask</option>
        <option value="bing">bing</option>
    </select>
    </body>
    </html>
    Problem might also stem from not having a doctype.
    Last edited by sunfighter; 10-06-2012 at 07:13 PM.

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    yep it seems to be the doctype, thanks so much.

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    It fixed the IE problem but now only safari is giving me problems. The menu bar height isn't working again lol.

    This is my full code

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
     
     <link rel="stylesheet" type="text/css" href="stylesheet.css" /><!-- connecting css to html -->
     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
     <meta name="description" content="Multiple search engines " /> 
     <meta name="keywords" content="Search engine, Google, Facebook, Yahoo, Bing, Ask, Youtube, Dogpile, Adult, Adult Videos."/>
     <title>Multiple Search Engine</title>
     <!--[if IE 9 ]> <link href="ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
     <!--[if IE 8 ]> <link href="ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
    
    </head>
    
    <body>
     
     
     
     
     
     <div id="header">
     <b>  &nbsp;
          &nbsp;
     <a href="index.html" class="links" style="color:white">Web</a> &nbsp; &nbsp;
     <a href="image.html" class="links">Images</a> &nbsp; &nbsp;
     <a href="videos.html" class="links">Videos</a> &nbsp; &nbsp;
     <a href="social.html" class="links">Social</a> &nbsp; &nbsp;
     <a href="adult videos.html" class="links">Adult Videos</a> &nbsp; &nbsp;
     </b>
     </div>
     
     
     <img id="theImage" name="theImage" alt="theImage"/>
     
    <form id="theForm" name="theForm">
    <input name="search" id="searchbox"/>
    <br/>
    
        <select name="engine" class="engine" id="engine" title="Choose search engine">
        <option>Choose one</option>
    	<option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="ask">ask</option>
    	<option value="bing">bing</option>
        </select>
    <br/>
    <center><input type="button" value="Search" name="doit"/></center>
    </form>
    
    <script type="text/javascript">
    (function () {
      function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
      function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
      function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
      function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
      
          var choices = {
              "google" : { "logo" : "images/google.png", "code" : doGoogle },
              "yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
    		  "bing" : { "logo" : "images/bing.png", "code" : doBing },
    		  "ask" : { "logo" : "images/ask.png", "code" : doAsk }
          }
    
          var form = document.getElementById("theForm");
          var engineCode = null;
    
          form.engine.onchange = function () {
              var choice = this.value;
              if ( choice == "Choose One" ) return;	  // "choose one" selected?
              document.getElementById("theImage").src = choices[choice].logo;   
              engineCode = choices[choice].code;
         }
    
         form.doit.onclick = function () {
             if ( engineCode != null ) {
                engineCode( form.search.value );
             }
        else {
    	alert ("Please choose an engine.");
        }
         }
    	 
    	document.onkeydown=function (e){
    	var keycode;
    	if (window.event) {keycode = window.event.keyCode;}
    	else if (e) {keycode = e.which;}
    	else {return true;}
    	if (keycode == 13&&engineCode!= null) {
        engineCode(form.search.value);
        return false;
        }
    	else {
    	if (keycode == 13&&engineCode== null) {
    	alert("Please choose an engine.");
    	}
    	}
    	}
    	 
      })(); // self-invoke anonymous function
    </script>
    
    
    
     </body>
    </html>

    Full css

    Code:
    /* Only edit this if you know what you're doing. */
    
     
    #searchbox {
     height:25px;
     width:500px;
     padding-left:10px;
     font-size:17px;
     outline:none;
    }
    
    .links {
     text-decoration:none;
     color:#b1b1b1;
     position:relative;
     top:7px;
     font-family:arial;
     font-size:13px;
    }
    
    .links:hover{
     color:white;
    }
    
    #header {
     border-bottom:1px solid black;
     height:30px;
     width:1026px;
     background-color:black;
     position:relative;
     top:-10px;
     left:-10px;
     }
    
    #footer {
     position:relative;
     top:500px;
     left:200px;
     width:290px;
    }
    
    #theForm {
     position:absolute;
     top:300px;
     left:250px;
     width:450px;
    }
    
    #theImage {
     margin-left:360px;
     margin-top:108px;
    }
    
    
    .engine {
     height:31px;
     position:relative;
     top:-31px;
     left:410px;
     font-size:15px;
     outline:none;
     font-weight:bold;
    }
    I did run my code through a validator and got 5 errors, mostly with the img tag. I tried fixing it but it just gives me another error after fixing the other error.
    Last edited by bigcasey123; 10-06-2012 at 11:44 PM.

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    em for Web fonts

    Don't know if this might impact your menu, but think EM is a better unit of measurement for fonts on the Web

    See for instance http://www.w3schools.com/cssref/css_units.asp

    em
    1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Still didn't fix the problem in safari. It has to be a css problem but my css past the validator with no errors or warnings.

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,287
    Thanks
    23
    Thanked 611 Times in 610 Posts
    First thing I did was to do a short reset to the css so we no longer need to do a position:relative; on #header. You should try to get rid of all of them, they normally are not needed.

    Corrected the errors in the code. Changed width in #searchbox and removed the left padding so there would be a separation between it and the dropdown. Removed #header bottom border and redid the height to reflect that.

    Looks good in FF, IE8, and safari.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
     <link rel="stylesheet" type="text/css" href="stylesheet.css"><!-- connecting css to html -->
     <meta http-equiv="content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Multiple search engines ">
     <meta name="keywords" content="Search engine, Google, Facebook, Yahoo, Bing, Ask, Youtube, Dogpile, Adult, Adult Videos.">
     <title>Multiple Search Engine</title>
     <!--[if IE 9 ]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
     <!--[if IE 8 ]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
    <style type="text/css">
    html, body, div{
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    .links {
     text-decoration:none;
     color:#b1b1b1;
     position:relative;
     top:7px;
     font-family:arial;
     font-size:13px;
    }
    .links:hover{
     color:white;
    }
    #footer {
     position:relative;
     top:500px;
     left:200px;
     width:290px;
    }
    #theForm {
     position:absolute;
     top:300px;
     left:250px;
     width:450px;
    }
    #theImage {
     margin-left:360px;
     margin-top:108px;
    }
    .engine {
     height:31px;
     position:relative;
     top:-31px;
     left:410px;
     font-size:15px;
     font-weight:bold;
    }
    #searchbox {
     height:25px;
     width:400px;
     font-size:17px;
    }
    #header {
     height:31px;
     width:1026px;
     background-color:black;
     }
    </style>
    </head>
    
    <body>
    <div id="header">
    	<b>&nbsp;&nbsp;
    	<a href="index.html" class="links" style="color:white">Web</a> &nbsp; &nbsp;
    	<a href="image.html" class="links">Images</a> &nbsp; &nbsp;
    	<a href="videos.html" class="links">Videos</a> &nbsp; &nbsp;
    	<a href="social.html" class="links">Social</a> &nbsp; &nbsp;
    	<a href="adult videos.html" class="links">Adult Videos</a> &nbsp; &nbsp;
    	</b>
    </div>
    
    <img id="theImage" alt="theImage">
    
    <form id="theForm" name="theForm">
    	<input name="search" id="searchbox">
    	<br>
    	<select name="engine" class="engine" id="engine" title="Choose search engine">
    	    <option>Choose one</option>
    		<option value="google">Google</option>
    	    <option value="yahoo">Yahoo</option>
    	    <option value="ask">ask</option>
    		<option value="bing">bing</option>
    	</select>
    	<br>
    	<input type="button" value="Search" name="doit">
    </form>
    
    <script type="text/javascript">
    (function () {
      function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
      function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
      function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
      function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
    
          var choices = {
              "google" : { "logo" : "images/google.png", "code" : doGoogle },
              "yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
    		  "bing" : { "logo" : "images/bing.png", "code" : doBing },
    		  "ask" : { "logo" : "images/ask.png", "code" : doAsk }
          }
    
          var form = document.getElementById("theForm");
          var engineCode = null;
    
          form.engine.onchange = function () {
              var choice = this.value;
              if ( choice == "Choose One" ) return;	  // "choose one" selected?
              document.getElementById("theImage").src = choices[choice].logo;
              engineCode = choices[choice].code;
         }
    
         form.doit.onclick = function () {
             if ( engineCode != null ) {
                engineCode( form.search.value );
             }
        else {
    	alert ("Please choose an engine.");
        }
         }
    
    	document.onkeydown=function (e){
    	var keycode;
    	if (window.event) {keycode = window.event.keyCode;}
    	else if (e) {keycode = e.which;}
    	else {return true;}
    	if (keycode == 13&&engineCode!= null) {
        engineCode(form.search.value);
        return false;
        }
    	else {
    	if (keycode == 13&&engineCode== null) {
    	alert("Please choose an engine.");
    	}
    	}
    	}
    
      })(); // self-invoke anonymous function
    </script>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    bigcasey123 (10-07-2012)

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Nope sill didn't work, this is what it looked like in safari

    Hmm this seems to be a browser problem. I used web inspector on it and tried to change the height but sadly only the width changes, i even tried to change the padding and margin.
    Last edited by bigcasey123; 10-07-2012 at 02:54 AM.

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Got it!! have to use
    Code:
    line-height
    lol thanks for helping


  •  

    Posting Permissions

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