...

View Full Version : Strange css?



westmatrix99
10-29-2007, 10:21 AM
Any idea how to fix these "LINES" between my "divs"?
This is the css code.


<STYLE TYPE="text/css" MEDIA=screen>
<!--
div#fact p, div#fact h2 {
margin-top: 0px;
margin-bottom: 0px;
color: #fff;
}
div#fact {
background-color: #009def;
color: #fff;
padding-left: 10px;
padding-right: 10px;
width: 160px;
padding-top: 5px;
padding-bottom: 10px;
}
-->
</STYLE>

This is the div tags:


<img src="images/top.gif" alt="" width="180" height="5"/>
<div id="fact">
<h2>Fact #1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<br />
</div>
<img src="images/bottom.gif" width="180" height="5" alt="" />

What could be the problem?
Images attached...

VIPStephan
10-29-2007, 11:19 AM
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Iíd suggest you put those images as background images since their only purpose is of stylistic nature and they donít make any sense semantic wise (switch off styles and ponder about it). This would also get rid of that problem.

westmatrix99
10-29-2007, 11:32 AM
I had it working a couple of weeks ago and yesterday it stopped working.
I hate css and it's methods of screwing up my designs, I would prefer to use tables, but want to figure this one out.

Basically it worked and now it doesn't!
Something changed in my css and I can't for the life of me find the fault or problem.

Cheers
West

VIPStephan
10-29-2007, 11:35 AM
CSS isnít screwing up anything if the page well thought out and coded correctly. Did you read the link I provided? I suppose youíre experienceing exactly that problem but I donít know for sure if we donít get a link or the entire code posted here.

westmatrix99
10-29-2007, 11:51 AM
This is one page that I use to include on the other pages, where I would need them.
Like I mentioned, it worked before and now it doesn't

This is what I would include:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
div#fact p, div#fact h2 {
margin-top: 0px;
margin-bottom: 0px;
color: #fff;
}
div#fact {
background-color: #009def;
color: #fff;
padding-left: 10px;
padding-right: 10px;
width: 160px;
padding-top: 5px;
padding-bottom: 10px;
}
-->
</STYLE>
<img src="images/top.gif" alt="" width="160" height="5"/>
<div id="fact">
<h2>Fact #1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<br />
</div>
<img src="images/bottom.gif" width="160" height="5" alt="" />

This is an entire page just to find the answer:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
div#fact p, div#fact h2 {
margin-top: 0px;
margin-bottom: 0px;
color: #fff;
}
div#fact {
background-color: #009def;
color: #fff;
padding-left: 10px;
padding-right: 10px;
width: 160px;
padding-top: 5px;
padding-bottom: 10px;
}
-->
</STYLE>
</head>
<body>
<img src="images/top.gif" alt="" width="180" height="5"/>
<div id="fact">
<h2>Fact #1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<br />
</div>
<img src="images/bottom.gif" width="180" height="5" alt="" />

</body>
</html>

westmatrix99
10-29-2007, 12:15 PM
In Firefox this works out perfect!
In IE7 it sucks!

westmatrix99
10-29-2007, 12:21 PM
CSS isnít screwing up anything if the page well thought out and coded correctly. Did you read the link I provided? I suppose youíre experienceing exactly that problem but I donít know for sure if we donít get a link or the entire code posted here.


Yes I read parts of it and it concludes that Firefox is better than IE will ever be.

westmatrix99
10-29-2007, 12:42 PM
This was ODD!
All I did was add "DIV" tags to the images, must have removed them while playing around.

<div><img src="images/top.gif" alt="" width="160" height="5"/></div>

Now it works again!

Cheers and Thanks.

VIPStephan
10-29-2007, 02:21 PM
Yes I read parts of it and it concludes that Firefox is better than IE will ever be.

You should read all of it because Iím not posting things for the fun of it. I was actually supposed to solve your problem but whateverÖ

It doesnít conclude that Firefox is better than IE, it concludes that images have a space underneath them because they are inline elements and as such are treated like text. So in order to remove that space you have to make them display: block;. But why am I actually trying to help here? Obviously my efforts are being ignoredÖ:rolleyes:

westmatrix99
10-29-2007, 02:27 PM
Not true.
Your efforts have helped me realize that I must have removed those "DIV" tags.

I tried that CSS=> display: block;. but no luck man.

westmatrix99
10-29-2007, 02:33 PM
Just testing that thing you did...
<code style="background-color: #FFFFBB">display: block;</code>

No luck!

How did you get that line to be yellow or highlighted?

VIPStephan
10-29-2007, 06:00 PM
Yeah, well, anywayÖ Didnít test it myself, just guessed as this is the most common problem with images and gaps and making them display: block; usually solves it.
The yellow highlighted code is done with the tags. There is also a button for that in the reply window, looking like '#i '. :)

westmatrix99
10-29-2007, 06:08 PM
I saw that little '#i' thingy, don't want to mess with something I know nothing about.

Thanks
Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum