#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Lansing, MI
    Posts
    239
    Rep Power
    16

    DIV border - extra bottom space/line in Explorer


    Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
    ----------
    Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

    So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

    Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

    Screenshot

    The page is just the index page at:
    GuyMerritt.net

    The CSS files looks like this:


    Code:
    body {
    margin: 0 0 0 0;
    background: #FEFEEC;
    height: 1000px;
    background: #F9F9EE;
    }
    h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
    #header {height: 220px; background: url(../images/header_graphics.jpg); }
    #left-sidebar {
    float:left;
    width:20%;
    padding-left: 20px;
    }
    #right-sidebar {
    float:right;
    width:20%;
    padding-right: 20px;
    }
    #main-content {width: 54%;float: left;padding-top: 0px;
    }
    .sidebars-2 #content {
    width: 54%;float: left;padding-top: 10px;
    }
    #box {
    border-style: solid;
    border-width: .05em;
    font-family: arial; 
    color: #777772;
    font-size: 13px;
    padding-left: 9px;
    padding-right: 9px;
    }
    img.example {
      width: 100%;
      max-width: 250px;
      height: auto;
    }
    div#slides {
    	width: 500px;
    	height: 280px;
    	overflow: hidden;
    }
    
    div#slides div {
    	height: 280px;
    	width: 500px;
    	font-size: 100px;
    	line-height: 200px;
    	text-align: center;
    	color: #fff;
    }
    
    ul#ticker {
    	height: 1.4em;
    	overflow: hidden;
    	border: solid 1px #aaa;
    	background: #ccc;
    }
    
    ul#ticker li {
    	padding: 0.2em 0;
    }
    
    /* @group global */
    
    p#links {
    	padding-top: 50px;
    	clear: both;
    }
    
    a#avatar {
    	position: absolute;
    	bottom: 10px;
    	right: 10px;
    }
    
    a#avatar img {
    	border: none;
    }
    
    h1 {
    	color: #0094d5;
    }
    
    a {
    	color: #0094d5;
    }
    
    a:visited, a:hover {
    	color: #00577e;
    }
    
    .red {
    	background: #e40053;
    }
    
    .blue {
    	background: #0094d5;
    }
    
    .green {
    	background: #43aa38;
    }
    
    /* @end */
    At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

    Thanks again,

    Guy Merritt,
    Flint, MI
    Last edited by 88guy; April 24th, 2011 at 02:47 PM. Reason: typo
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Are you saying that you've fixed your issue?

    Why do things render differently..? How long have you got!

    There are published standards for CSS describing what is valid css and how it should be interpreted and rendered by the browser. But I believe the definitions are not always as clear as they could be!

    The various browser companies interpret the rules in different ways, and decide to implement some parts (and not others) and add their own custom rules?! There is also the issue that browser companies need to (but don't always..) retain backwards-compatibilty with older versions of their browser. They also release new versions at different times.

    I would recommend getting your page working in FireFox. Then take a deep breath (say a small prayer ) and open it in IE. Once you've massaged it for IE then try Chrome, etc.

    BTW: If you're codiing in DreamWeaver I would be careful to only change the code/css and not to change things in the Design View (I think that's what is called, as I recall). DW has a habit of adding extra code, particularly (unnecessary) breaks, to your code.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Lansing, MI
    Posts
    239
    Rep Power
    16
    Originally Posted by AndrewSW
    Are you saying that you've fixed your issue?

    Why do things render differently..? How long have you got!

    There are published standards for CSS describing what is valid css and how it should be interpreted and rendered by the browser. But I believe the definitions are not always as clear as they could be!

    The various browser companies interpret the rules in different ways, and decide to implement some parts (and not others) and add their own custom rules?! There is also the issue that browser companies need to (but don't always..) retain backwards-compatibilty with older versions of their browser. They also release new versions at different times.

    I would recommend getting your page working in FireFox. Then take a deep breath (say a small prayer ) and open it in IE. Once you've massaged it for IE then try Chrome, etc.

    BTW: If you're codiing in DreamWeaver I would be careful to only change the code/css and not to change things in the Design View (I think that's what is called, as I recall). DW has a habit of adding extra code, particularly (unnecessary) breaks, to your code.

    Yes - I just had something buggered in the code.

    And - as I've said. I'm not really coding in Dreamweaver as, while I'm something of a hack in terms of code, I just write everything in a text editor and get reasonable results. I still use tables which is pretty much a no-no nowadays. I started fooling with Dreamweaver quite recently, a bit - really have never used the thing to make a web site. I'd read that it was a good tool to get some code education - not so sure about all of that.... I can't even figure the damned thing out! For instance, I just did this re-work of a site for a mattress store - the code isn't so good, but it looks fine (I think) - did it with Notepad and Gedit in Linux:
    Here's an example

    But my code is way out of date - and this "DIV" stuff - wow. It's all new to me.
    Anyway - thanks for the feedback. That validator doo-dad helps a lot.
    Last edited by 88guy; April 24th, 2011 at 03:01 PM.

IMN logo majestic logo threadwatch logo seochat tools logo