10 replies to this topic

[randallj2877]

I've got some CSS issues with the following page: http://www.mediamogu...lient/index.php.

In IE:

1) Extra dark grey space at the top and bottom of text boxes on the right...need to get rid of this space, and make it look like it does in Firefox...

2) Need to get the "Go!" search submit button to look lke it does in Firefox....you'll notice there is an extra thin line of grey above the submit in IE...I need to get rid of this

Thanks for any help with this!

[coolaid]

well, ie handles white space very delicately, so i think one possible problem coulde be leaving no spaces between the divs for example, dont do:
<div> content </div>

instead, do this:
<div>content</div>

[randallj2877]

Thanks for the suggestion...I tried eliminating all possible spaces between the div tags, but that didn;t seem to help....

Any other ideas?

[raenef]

It looks fine in IE but now theres a big grey space below the go-section in firefox.
So since I would think you'd want that brownish-grey colmn to extend all the way down to the bottom as it does in IE I reccomend this article http://www.alistapar...es/fauxcolumns/
Good Luck with it

[randallj2877]

oops...

Edited by randallj2877, 07 August 2005 - 07:13 PM.

[randallj2877]

Thanks for the article...I'm aware of this, though, and I'm even using what it recommends in my code...

At this point, the text boxes look OK in IE now...

I still can;t seem to fix the search submit button in IE....there is a thin gray line above it...it should look like it does in Firefox...

Also, now in Firefox the background image of #content_container won;t appear and there is a thin slivver of a line beneath the second-to-top text box on the right that I didn;t notice before....

I appreciate your help....

[raenef]

As for IE, IE is very touchy about whitespace sometimes so examine your code and try to minimize spacing, line-breaks and the like around your search-submit button.
Also taking margins and paddings and setting them to 0 in your css may help too something like:

form{
padding: 0px;
margin: 0px;
}

input, select, textarea{
padding: 0px;
margin: 0px;
}

Also your source itself looks somewhat strange to me, are you by chance using some form of skinning system?

[randallj2877]

Thanks! You rock...

This code:

form
{
	padding:0px;
	margin:0px;
}

input, select, textarea
{
	padding:0px;
	margin:0px;
}

was what I needed to fix the search submit button...

I had:

form
{
	margin:0px;
}

before, but apparently that wasn;t enough to fix the problem....sigh

I still have these issues though:

Quote

Also, now in Firefox the background image of #content_container won;t appear and there is a thin slivver of a line beneath the second-to-top text box on the right that I didn;t notice before....

And you said:

Quote

Also your source itself looks somewhat strange to me, are you by chance using some form of skinning system?

I don;t believe so...this is a client's code that I'm converting from tabular to CSS formatting...the side menu is some free javascript that apprarently he found, and some of the javascript code is obviously Dreamweaver-generated....there's also some PHP code in there to serve up different images in the text boxes, etc (maybe that's the "skinning system" you are referring to?)...but that's about it....

[raenef]

Yes thats probably it (about the skinning system)

as for the background image, I've run across this problem before in a different layout I was working on I do know that if you add a border to your css like this:

#content_container
{
background-image:url(http://www.mediamogulsweb.com/client/images/background.jpg);
background-repeat:repeat-y;
width:757px;
padding:0;
padding-left:23px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
border: 1px solid #000;
}

The background will show up for some reason? but then you have to deal with the unwanted border there. So Im googling it right now to see if I cant find a reason for this.

I'll also have a look at that tiny little bar problem as well.

Edit: Ok I've found the background-image solution: Give this code a try change the css for #content_container to:

#content_container
{	background-image:url(http://www.mediamogulsweb.com/client/images/background.jpg);
background-repeat:repeat-y;
width:757px;
padding:0;
padding-left:23px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
float: left;
}

And as for your content-box problem the only difference I see between that content and your others is the content itself:

<a style="border:none" target="_blank" href="http://morningstar.starbase118.net" title="USS Morningstar">
<img src="images/randomship/random-morningstar.jpg" alt="USS Morningstar" width="" height="" border="0">
</a>

Which by the way is a missing image. So perhaps something in there has something to do with it. (As in if the image was fixed the column would expand vertically fixing that little 1px bar we see.)

[randallj2877]

Have I told you that you rock yet?!?!

This code:

#content_container
{ background-image:url(http://www.mediamogulsweb.com/client/images/background.jpg);
background-repeat:repeat-y;
width:757px;
padding:0;
padding-left:23px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
float: left;
}

works! I can;t for the life of me figure out why that float:left solves the problem, though....do you know why? If you Googled the answer, can you post the link here?

Quote

And as for your content-box problem the only difference I see between that content and your others is the content itself
<a style="border:none" target="_blank" href="http://morningstar.starbase118.net" title="USS Morningstar">
<img src="images/randomship/random-morningstar.jpg" alt="USS Morningstar" width="" height="" border="0">
</a>

Which by the way is a missing image. So perhaps something in there has something to do with it. (As in if the image was fixed the column would expand vertically fixing that little 1px bar we see.)

Yes, you;re exactly right...there is some PHP in that box that is supposed to display an image, but my client didn;t give me the image or a correct link to it...So be it...like you said, if the image actually existed and rendered correctly, then that little slivver of a line would likely disappear....

Thanks for all of your help here...I found a new favorite forum...

[raenef]

Not a problem and thanks much for the "You Rocks" ; also glad this is your new favorite forum.

For the float explanation and why it works:
Summary
This is because all of the content inside of the #container div is floated.
This means that the floated divs (your content) cannot influence the height of the container. So the container has no height.

The solution is to float the #container. This forces the container to expand and enclose it's floated children.

IE and Opera do this automatically, but it is a spec violation to do so. firefox and NS7 have it right. Floats should not be contained unless the designer specifically instructs the browser to do so (by floating the container).

Source I found the answer from http://www.webmaster...orum83/5233.htm

Good luck in your future designs.