News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

css padding problem

Started by Evilsprouts, June 20, 2006, 09:20:03 AM

Previous topic - Next topic

Evilsprouts

Hi,

I'm having trouble getting a theme I'm designing for a package I'm using to work properly in IE. Here's a screen shot, with the offending area in turquoise:



no matter what I do, I can't get rid of that padding, which seems to be around the image.

Changing the padding properties for any of the divs seems to have failed. Is this an IE quirk that can be got around? Any ideas much appreciated.

the code is simple:

<body<?php
    
echo $bodytags";
    if ($focus) {
        echo " onload=\"setfocus()\"";
    };
    ?>
>
   
<div id="page">
   
<?php if ($home) {  // This is what gets printed on the home page only  
?>

    <div id="header-home" class="clearfix">
      <!--<h1 class="headermain">
      <?php echo $heading ?></h1>-->
       <div class="headermenu"><?php echo $menu ?></div>
       <a href="http://moodle.plumsteadmanor.com"><img src="<?php echo $CFG->wwwroot;?>/theme/chameleon/pix/pms_silver_2_02.jpg" alt="Home"></a>
          </div>
<!--<div class="navbar clearfix">
&nbsp;     
    </div>-->


and the CSS looks like this: (relevant tags are the last two)


div#header-home {
  background-image: url(pix/pms_silver_2_03.jpg);
  background-repeat: repeat-x;
  margin: 0px;
  padding: 0px;
  background-color: #00ffff;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
}
div#header {
  padding: 0px;
  background-image: url(pix/pms_silver_2_03.jpg);
  background-repeat: repeat-x;
  background-color: #aaaaaa;
  border-color: #666666;
}


sixthcrusifix

that's  one of the biggest CSS files I've ever seen in my life, did you really need ALLL of that for that one page????


I have teh same problem with an image and I've yet to figure out how to get rid of it. IE  . . . ooh it's to frustrating to talk about. Just when I've got it working in everything on the planet it looks jacked up in IE. Why could the most widely used browser in the world at least be a good one?
Visite me website at http://www.sixthcrusifix.com

Evilsprouts

Please bear in mind that it wasn't me (Jack) who posted this it was someone from work used my account.

sixthcrusifix

Quote from: Evilsprouts on June 20, 2006, 12:05:16 PM
Please bear in mind that it wasn't me (Jack) who posted this it was someone from work used my account.

oh. well he should sign up.
Visite me website at http://www.sixthcrusifix.com

Evilsprouts

And what is the point of him signing up for 1 question?

Normally I keep my opinions to my self but.... if you want to help then please help otherwise don't bother posting because I really don't want to read a load of pointless posts from you.

Thanks.

brainiac744

Not entirely sure if this applies here, but I've found that in IE, if you have a code something like this:

<td>
<img src="something.gif">
</td>

or

<div>
<img src="something.gif"
</div>


IE tends to put spaces around it erroneously.

To fix it shove the whole thing on one line, like so:

<div><img src="something.gif"></div>

IE's parsing engine is so buggy....

Guide

Indeed, I just tried it locally and just putting the </div> right after the </a> does the trick...

(Damn ! I passed half and hour on the CSS before abandonning, and I forgot to think the "problem" could come from the HTML itself ! )

sixthcrusifix

#7
Quote from: Evilsprouts on June 20, 2006, 12:19:03 PM
And what is the point of him signing up for 1 question?

Normally I keep my opinions to my self but.... if you want to help then please help otherwise don't bother posting because I really don't want to read a load of pointless posts from you.

Thanks.

Hey don't be rude. If you have friends who have questions there are a lot of other forums they can go to, you shouldn't let people use your account, how can anyone elaborate with your friend if it's not even his account? I can't help you, I am not one of those people who will actually read through a million lines of crap whenever somone has a problem. If you're asking for help you should at least isolate the problem and not make people read through your entire file.


Actually maybe I can help.

It seems that if the person would have defined the height and width of the image in the classes/ids that contain them there would be no strange space, because I tried that on my site and it worked, something to try anyway. I can't really tell because he doesn't provide what the "clearfix" class is so I have no idea what it does. And I can't figure out if his stuff is in HTML comment tags because it's supposed to be or if he just did that when he was testing it. By teh look o fteh image it just seemslike IE is padding because a height value needs to be specified. I'm pretty sure that if whatever is containing everything had a defined height based on the image the weird blue space would go away.

Visite me website at http://www.sixthcrusifix.com

brainiac744

Quote from: Guide on June 20, 2006, 08:27:39 PM
Indeed, I just tried it locally and just putting the </div> right after the </a> does the trick...

(Damn ! I passed half and hour on the CSS before abandonning, and I forgot to think the "problem" could come from the HTML itself ! )

Glad I could help, I remember when I first encountered this bug and was ripping my hair out too ;)

Evilsprouts

Quote from: sixthcrusifix on June 20, 2006, 09:52:08 PM

Hey don't be rude. If you have friends who have questions there are a lot of other forums they can go to, you shouldn't let people use your account, how can anyone elaborate with your friend if it's not even his account? I can't help you, I am not one of those people who will actually read through a million lines of crap whenever somone has a problem. If you're asking for help you should at least isolate the problem and not make people read through your entire file.


Actually maybe I can help.

It seems that if the person would have defined the height and width of the image in the classes/ids that contain them there would be no strange space, because I tried that on my site and it worked, something to try anyway. I can't really tell because he doesn't provide what the "clearfix" class is so I have no idea what it does. And I can't figure out if his stuff is in HTML comment tags because it's supposed to be or if he just did that when he was testing it. By teh look o fteh image it just seemslike IE is padding because a height value needs to be specified. I'm pretty sure that if whatever is containing everything had a defined height based on the image the weird blue space would go away.



As a matter of fact you were the one being rude
Quoteoh. Well he should sign up.
and to be perfectly honest you are the most annoying  know-it-all in the freePgs community. I say no more on the matter because I don't want this topic to bet locked!

(Just for the record I don't normally have slanging matches on forums or anywhere else for that matter)

Thanks for the help guys ill let him know when I see him today.