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

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Height and font-size don't work on IE8? (http://www.codingforums.com/showthread.php?t=275378)

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?

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>

I meant that it won't work with the dropmenu, it works with everything else.

You should post your drop menu code with all css

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;

}

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.

yep it seems to be the doctype, thanks so much.

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.

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

Quote:

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

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.

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>

Nope sill didn't work, this is what it looked like in safari
http://i49.tinypic.com/2nsrsjs.jpg
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.

Got it!! have to use

Code:

line-height

lol thanks for helping :)