Problem with CSS and IE

[Ashton]

Hello. :)
I've looked all around the internet for an answer to this, but I can't seem to find it anywhere. It's like a big gap. I've had some recommendations as to what it was, like the 3 pixel glitch, but it didn't seem to help.
This is my website here, and if you view it with Firefox, everything is fine.
But, if you view it with Internet Explorer (IE), it's like there is a big gap between the top of the page, and the text.
If you have a look here, you will see a Screenshot of what it should look like with Firefox, and Internet Explorer.
If there is anything you can do to help, please let me know. You can email me at [e-mail] if it's needed.
Thank you. :)


-Ashton

[tricky76]

Are you using floats to position your DIVS? if so make sure you dont have any positioning (i.e. relative) on the DIVS too as this will mess it up when viewing in IE.

Also when viewing on a Mac the bottom boxes overflow to the right of the box. Are you using a main container to hold all the elements?

[Ashton]

Are you using floats to position your DIVS? if so make sure you dont have any positioning (i.e. relative) on the DIVS too as this will mess it up when viewing in IE.

I am using DIVS, but how do I know which ones are messing it up.. Trial and Error?

Also when viewing on a Mac the bottom boxes overflow to the right of the box. Are you using a main container to hold all the elements?

I'm not using a Main container. Text is just over main image.

Thank you! :D


-Ashton

[tricky76]

could you post your CSS or link to it and I could have a look for you.

I was just asking how you have positioned your DIVs on the page, if you are using floats and positioning they can conflict.

I would also recomend using a container to hold all of your elements, that way you can ensure it all fits within a constrained width and you don't get any overlaps.

Anyways post your code and I'll have a look :)

[Ashton]

Sure thing :)

This is the CSS coding.. Sorry if it's a bit big :-/

body {
 
    margin: 0 auto;
 
    padding: 0;
 
    font: 9pt Arial, Verdana, Sans-Serif;
 
    background: #fff;
 
}
 
 
 
a {
 
    text-decoration: none;
 
    color: #2489DB;
 
}
 
 
 
a:hover {
 
    color: #808080;
 
}
 
 
 
a img {
 
    border: 0;
 
}
 
 
 
h3 {
 
    font-size: 1.3em;
 
    margin: 0 0 5px 0;
 
    padding: 2px 0px 0px 0px;
 
}
 
 
 
#bg { 
 
    width: 760px;
    height: 919px;
 
    margin: 0 auto;
 
    padding: 5px 10px 10px 10px;
 
    background: url(bg2.gif) top left no-repeat;
 
}
 
 
 
 
 
#sadrzaj {
 
    padding-top: 9px;
 
    color: #303030;
 
    width: 736px;
 
    padding-left: 2px;
 
 
 
}
 
 
 
#toplinks {
 
    height: 20px;
 
    background: #2489DB;
 
    text-align: right;
 
    padding-right: 10px;    
 
    padding-top: 5px;
 
}
 
 
 
#toplinks a {
 
    font-size: 8pt;
 
    display: inline;
 
    padding-left: 8px;
 
    padding-right: 5px;
 
    background: url(strelica.gif) left no-repeat;
 
    padding-bottom: 3px;
 
    margin-right: 5px;
 
    color: #fff;
 
}
 
 
 
#toplinks a:hover {
 
    border-bottom: 2px solid #fff;    
 
}
 
 
#floatbox {
  float: left;
  width: 100px;
  }
 
p {
  margin-left: 110px;
  }
 
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #floatbox {
  margin-right: 10px;
  }
 
* html p {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */
 
 
#zaglavlje {
 
    clear: both;
 
    margin: 0px 0 5px 0;
 
    height: 70px;
 
    background: url(header.gif) repeat-x;
 
}
 
 
 
#title {
 
    float: left;
 
    font-size: 14pt;
 
    font-weight: bold;
 
    padding-top: 25px;
 
    padding-left: 5px;
 
}
 
 
 
#title_info {
 
    float: right;
 
    height: auto;
 
    padding: 8px;
 
    width: 310px;
 
    margin: 10px 5px 0 0;
 
    border: 2px solid #fff;    
 
    background: #FFF5D9;
 
    color: #808080;
 
}
 
 
 
#title_info p {
 
    margin: 0;
 
}
 
 
 
#navigacija {
 
    clear: left;
 
    float: left;
 
    width: 150px;
 
    margin: 0 0 10px 0;
 
    padding: 0;
 
    font-size: 0.9em;
 
}
 
 
 
#navigacija ul {    
 
    list-style: none;
 
    width: 150px;
 
    margin: 0 0 3px 0;
 
    padding: 0;
 
    font-size: 1.1em;
 
}    
 
 
 
#navigacija li {
 
    margin-bottom: 4px;
 
}
 
 
 
#navigacija li a, #navigacija li a:visited {
 
    text-align: right;
 
    height: 20px;
 
    text-decoration: none;
 
    color: #fff;
 
    display: block;
 
    padding: 6px 8px 0 10px;
 
    background: #2489DB;
 
}    
 
 
 
#navigacija li a:hover {
 
    background: #A9CAEB;
 
    color: #286ea0;
 
}
 
 
 
.lijevo {
 
    margin: 2px 0 10px 0;
 
    padding: 3px 10px 5px 10px;
 
    width: 130px;
 
    border-top: 1px solid #DDD;
 
    border-bottom: 1px solid #DDD;
 
    color: #6B6B6B;
 
    background: #eee url(lijevo.gif) repeat-x;
 
}
 
 
 
.lijevo a, .lijevo a:visited {
 
    text-decoration: underline;
 
}
 
 
 
#desna_rubrika {
 
    float: right;
 
    width: 223px;
 
    margin: 0 0 10px 0;
 
    padding: 5px 13px 20px 10px;
 
    border-top: 1px solid #DDD;
 
    border-bottom: 1px solid #DDD;
 
    background: #eee url(lijevo.gif) repeat-x;
 
    color: #5D5D5D;
 
    line-height: 1.5em;
 
}
 
 
 
#desna_rubrika p {
 
    margin: 0px;
 
    font-size: 90%;
 
}
 
 
 
#desna_rubrika h3 {
 
    font-size: 9pt;    
 
}
 
 
 
#desna_rubrika a {
 
    display: block;
 
    height: 12px;
 
    padding-bottom: 4px;
 
    margin-bottom: 2px;
 
    border-bottom: 1px solid #ccc;
 
}
 
 
 
#podaci {
 
    margin: 15px 0 0 0;
 
    border: 2px solid #fff;
 
    background: #E5EFF9 url(plavo.gif);
 
    padding: 3px 3px 3px 6px;
 
    color: #70C256;
 
}
 
 
 
#podaci a, #podaci a:visited {
 
    display: inline;
 
    border: none;    
 
}
 
 
 
#clanci {
 
    margin:  0 0 5px 155px;
 
    padding: 0 10px 5px 6px;
 
    line-height: 1.4em;
 
    background: url(clanak.gif) repeat-x bottom left;
 
}
 
 
 
#clanci h2 {
 
    margin: 0px;
 
    padding: 4px 0 4px 0;
 
    font-size: 12pt;
 
}
 
 
 
#clanci p {
 
    margin: 0;
 
}
 
 
 
.datum {
 
    padding-top: 2px;
 
    height: 30px;
 
    margin: 5px 0 6px 0;
 
    border-top: 1px solid #eee;
 
    font-size: 80%;
 
    text-transform: uppercase;    
 
    color: #808080;
 
}
 
 
 
#lijeva_rubrika {
 
    margin: 0 250px 20px 155px;
 
    border-top: 1px solid #AFCEED;
 
    border-bottom: 1px solid #AFCEED;
 
    background: #E5EFF9 url(plavo.gif) repeat-x;
 
    padding: 5px 6px 5px 6px;
 
    line-height: 1.6em;
 
    text-align: left;
 
    color: #5D5D5D;
 
}
 
 
 
#lijeva_rubrika a, #lijeva_rubrika a:visited {
 
    text-decoration: underline;    
 
}
 
 
 
#lijeva_rubrika h2 {
 
    font-size: 1.5em;
 
    margin: 0 0 0.5em 0;
 
    color: #808080;
 
    padding-top: 3px;
 
}
 
 
 
#lijeva_rubrika p {
 
    padding: 0;
 
    margin: 0;
 
}
 

Thanks again! :D
I'm very sure I've done something wrong. :P


-Ashton

[drhowarddrfine]

I am using DIVS, but how do I know which ones are messing it up.. Trial and Error?

Get the Firefox extension "Web Developer Toolbar". It has an outline tool that will pinpoint it for you.

IE screws up on widths. If the total width of your contained elements adds up to the total width exactly, you can almost count on IE doing it wrong among almost everything else. Try making the total width a few px wider. The term for this IE bug is "float drop".

[Ashton]

Okay, this is all great! But, so far, there's still no definite thing that makes it vary using IE. I know it has something to with the DIVS, and the "Web Developer Toolbar" is great! Thanks very much drhowarddrfine. :) So I guess I've just got to keep messing 'round with them and see what I come up with. Any other suggestions will help dearly. Thank you. :)


-Ashton