SitePoint Sponsor

User Tag List

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

    Question IE issue: border and font size

    I am building a website on my Mac and am having problems with IE. I look fine in Firefox and other browsers but has a problem in IE. I am not sure what the fix could be (looked in so many places ).

    The menu doesn't show the borders and the size of the font is wrong in all IE version I checked on browsershots.org: camillemarion.com/test/

    Any idea to fix this?

    Here is the CSS code:

    body {
    margin: 0 auto;
    background: #cccccc scroll 0%;
    text-align: center;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    }
    h1 {
    margin: 0 0 5px;
    padding: 0;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 140%;
    }
    p {
    margin: 0;
    padding: 0 0 15px;
    line-height: 140%;
    }
    a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    }
    a:hover {
    text-decoration: none;
    }

    #all {
    margin: 0 auto;
    text-align: left;
    width: 900px;
    }

    /*Title Box*/
    h1#titlebox {
    padding:20px 20px 20px 20px;
    margin:0;
    font-size:1.5em;
    text-color:#000000;
    text-align:left;
    font-weight:normal;
    width: 700px;
    }

    /*Big white Box*/
    #container {
    margin: 50px 0 0 0;
    padding: 10px 10px 20px 20px;
    background: #ffffff;
    width: 900px;
    }

    /*navigation menu on left*/
    ul#nav {
    margin-left: 8px;
    margine-top: 0;
    padding-left: 0;
    list-style-type: none;
    float: top;
    width: 150px;
    }
    #nav la {
    font-weight: bold;
    float: right;
    width: 180px;
    text-align: left;
    font-size: 14px;
    display: block;
    border-top: 1px solid #cccccc;
    }
    #nav lb {
    float: right;
    width: 180px;
    text-align: left;
    font-size: 12px;
    display: block;
    border-top: 1px dotted #cccccc;
    }
    #nav lc {
    float: right;
    width: 160px;
    text-align: left;
    font-size: 10px;
    display: block;
    }

    #nav a {
    display: block;
    padding: 5px;
    }
    #nav a:hover {
    background-color: #cccccc;
    color:#333333;
    }

    * html h2 {
    zoom: 1
    }

    /*Main Text*/
    #content {
    padding: 0 10px 20px 20px;
    float: left;
    width: 650px;
    border-left: 1px solid #cccccc;
    }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {
    }
    * html .clearfix {
    height: 1%;
    }
    .clearfix {
    display: block;
    }

    /*Copyright*/
    #footertext {
    font-size: 10px;
    font-weight: bold;
    margin: 10px 10px;
    text-align: center;
    padding-left: 550px;
    }
    #footertext a {
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    }

    /*Box*/
    .sidebar {
    float: left;
    margin: 10px;
    border: 1px solid #cccccc;
    }
    .sidebar h1 {
    font-size: 1.4em;
    margin: 0;
    text-align: center;
    }
    .sidebar ul {
    font-size: 1em;
    margin: 0;
    padding: 0 0 0 0;
    }
    .sidebar li {
    list-style: none;
    }

    /*Picture Table*/
    table.picturetable {
    float:center;
    margin: 20px;
    padding:10px 10px 10px 10px;
    table-layout: automatic;
    background:#cccccc;
    border: 1px dotted #cccccc;
    }
    td {
    padding: 5px;
    }

    /*IE Bug Fixes*/

    * html .sidebar {
    display:inline;
    }

    * html #nav la {
    display:inline;
    }

    * html #nav lb {
    display:inline;
    }

    * html #nav lc {
    display:inline;
    }

    Thanks for any help you can give me.

  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)
    Hi blaisemarion, welcome to SitePoint!

    You have a couple of errors in the html causing this. Some browsers are more intelligent than others and correct them on the fly.

    Instead of renaming the tags you can use classes:
    HTML Code:
    <ul id="nav">
    	<li class="la"><a href="/">Accueil</a></li>
    	<li class="la"><a href="/">C.V. (PDF)</a></li>
    	<li class="la"><a href="/">Projets</a></li>
    	<li class="lb"><a href="/">Initiation</a></li>
    	<li class="lc"><a href="/">- Espace voitures anciennes</a></li>
    	<li class="lb"><a href="/">Maitrise de l'espace</a></li>
    	<li class="lc"><a href="/">- Le logis</a></li>
    	<li class="lc"><a href="/">- L'image</a></li>
    	<li class="lc"><a href="/">- 30 X 30</a></li>
    	<li class="lc"><a href="/">- 4 logements</a></li>
    	<li class="lb"><a href="/">Maitrise des programmes</a></li>
    	<li class="lc"><a href="/">- Figure urbaine</a></li>
    	<li class="lc"><a href="/">- Logements collectifs</a></li>
    	<li class="lc"><a href="/">- Médiatèque européenne</a></li>
    	<li class="lb"><a href="/">Synthèse</a></li>
    	<li class="la"><a href="/">Experience</a></li>
    	<li class="la"><a href="/">Book (PDF)</a></li>
    	<li class="la"><a href="/">Contact</a></li>
    </ul>
    Then adjust the css like this:
    Code:
    /*navigation menu on left*/
    ul#nav {
    	margin-left: 8px;
    	padding-left: 0;
    	list-style-type: none;
    /*	float: top; *** the only valid values are left or right or none (reset to default). A float encloses floats inside and makes the overflow below unnecessary */
    	overflow: hidden; /* makes the container enclose floats inside in good browsers, IE6 does that by the width triggering IE hasLayout */
    	width: 180px; /* was 150px with a 30px overflow */
    	border-bottom: 1px solid #cccccc; /* instead of the empty last list-item */
    }
    #nav .la {
    	font-weight: bold;
    	float: right;
    	width: 180px;
    	text-align: left;
    	font-size: 14px;
    	display: block;
    	border-top: 1px solid #cccccc;
    }
    #nav .lb {
    	float: right;
    	width: 180px;
    	text-align: left;
    	font-size: 12px;
    	display: block;
    	border-top: 1px dotted #cccccc;
    }
    #nav .lc {
    	float: right;
    	width: 160px;
    	text-align: left;
    	font-size: 10px;
    	display: block;
    }
    #nav a {
    	position: relative; /* property moved from the html */
    	display: block;
    	padding: 5px;
    }
    #nav a:hover {
    	background-color: #cccccc;
    	color: #333333;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    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)
    The font differences in IE is due to the font-size setting in the em-unit on the body. That trips IE to multiply user font changes with each descending font-size setting with em.

    To avoid that, on the body use the % unit for flexible font-size. Then the multiplying doesn't happen.

    Code:
    body {
    margin: 0 auto;
    background: #cccccc scroll 0%;
    text-align: center;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 80%;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help. I will try this.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest trying the layout generator below

    http://www.pagecolumn.com/3_column_div_generator.htm

    Select layout unit in the option tab as em and select body font unit as also em. And drag the slider of font-size.

    This must not exactly apply to the problem you have but a good reminder we must be careful when the font unit in body tag is set as em.


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
  •