|
|
|
Next: Problem With Image Gallery and CSS mouse over
|
| Author |
Message |
External
Since: Oct 25, 2004
Posts: 425
|
(Msg. 16) Posted: Thu Jul 19, 2007 6:20 pm
Post subject: Re: Div Spacing Problem
Archived from groups: comp>infosystems>www>authoring>stylesheets (more info?)
|
|
|
Rik wrote:
> On Thu, 19 Jul 2007 18:06:38 +0200, Gus Richter
> <gusrichter.TakeThisOut@netscape.net> wrote:
>
>> Bergamot wrote:
>>> Gus Richter wrote:
>>>> FYI I wasn't giving a solution to any problem, just showing that
>>>> there is no *white on white* problem.
>>> You are mistaken - there is most certainly a "white on white" problem.
>>> The OP didn't set a background color on the links themselves so they get
>>> whatever background color happens to be behind them. In this case, it is
>>> white, not the dark gray of their container.
>>> The general rule is if you set a foreground color, set background with
>>> it or risk the "white on white" problem we saw here.
>>
>> *double sigh*
>>
>
> Let's try for the last time:
>
> 1. If you set a color on an element, set the background color for that
> element too.
> 2. Claiming one is sure it's over another element with a proper
> background-color is not a valid excuse. Things can go somewhat different
> then expected, especially when floating, as you can see here.
> 3. Stretching containers is no solution, it's just hiding the problem.
>
> (It looks correct in Opera BTW, but that's just lucky)
I happen to think that the OP did not want the white portion, but
desired the whole to be all black, in which case the text shows *white
on black*. I did not go deeper into the link/hover thing at all,
although you all may, and probably are, right on that. Who knows what
the OP wanted, since he did not bring up any problem in this regard and
he may not even be aware of it. I for one do not care; sorry.
--
Gus |
|
| Back to top |
|
 | |
External
Since: Jul 12, 2007
Posts: 8
|
(Msg. 17) Posted: Thu Jul 19, 2007 10:19 pm
Post subject: Re: Div Spacing Problem
Archived from groups: per prev. post (more info?)
|
|
|
On 2007-07-19 04:04:16 +0100, Gus Richter <gusrichter DeleteThis @netscape.net> said:
> Ste wrote:
>> On 2007-07-19 03:31:27 +0100, "Jonathan N. Little"
>> <lws4art DeleteThis @centralva.net> said:
>>
>>> #content H2, #content P { margin: 0; padding: 0; }
>>
>> Thanks Jonathan - that worked a treat!
>
> You may wish to try this to maintain other margins:
>
> <p id="last_p">
> Please contact us and ...........
> </p>
>
> #content h2 {margin-top:0;}
> #last_p {margin-bottom:0;}
Thanks - once I get the layout working okay, I'll use some decendent
selectors (I think that's what it's called?) to target only certain
markup in certain sections of the page.
Ste |
|
| Back to top |
|
| |
External
Since: Jul 12, 2007
Posts: 8
|
(Msg. 18) Posted: Thu Jul 19, 2007 10:22 pm
Post subject: Re: Div Spacing Problem
Archived from groups: per prev. post (more info?)
|
|
|
On 2007-07-19 03:56:05 +0100, "Jonathan N. Little"
<lws4art.RemoveThis@centralva.net> said:
> Ste wrote:
>
>> The page in question can be found via this link:
>> http://tinyurl.com/2bk78a (it's the spacing above and below the div
>> with the pink background colour that I'm having the issues with).
>
> Sorry, missed the *tinyurl*
>
> Firstly change your doctype to:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> Your markup is in HTML not XHTML
I used this because most of the people who's work I admire, and who
promote the use of web standards, seem to use this doctype themselves.
I thought as long as I open and close each piece of markup correctly it
would be okay?
> Secondly, your do not need "width: 100%" on your non-floated DIVs, just
> change to to add a little padding which looks better anyway not having
> the text slammed up against the edges...
>
> #content { margin: 0; padding: .5em; background: pink; clear: both; }
> #footer { margin: 0; padding: .5em; background-color:#cccccc; clear: both; }
>
> BTW for margin and padding values when '0' do not need the units and
> your menu is *white on white*, a bit hard to see...
I've removed the width now and the 0px for 0.
Ste |
|
| Back to top |
|
| |
External
Since: Feb 02, 2005
Posts: 2526
|
(Msg. 19) Posted: Thu Jul 19, 2007 10:22 pm
Post subject: Re: Div Spacing Problem
Archived from groups: per prev. post (more info?)
|
|
|
Ste wrote:
> On 2007-07-19 03:56:05 +0100, "Jonathan N. Little"
> <lws4art DeleteThis @centralva.net> said:
>
>> Ste wrote:
>>
>>> The page in question can be found via this link:
>>> http://tinyurl.com/2bk78a (it's the spacing above and below the div
>>> with the pink background colour that I'm having the issues with).
>>
>> Sorry, missed the *tinyurl*
>>
>> Firstly change your doctype to:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>>
>> Your markup is in HTML not XHTML
>
> I used this because most of the people who's work I admire, and who
> promote the use of web standards, seem to use this doctype themselves.
> I thought as long as I open and close each piece of markup correctly it
> would be okay?
It is a lot more complicated than that, if you do not need the *special*
features of xhtml and of course if you not know the syntax, don't use
xhtml. Stay with html 4.01 strict.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com |
|
| Back to top |
|
| |
External
Since: Jul 12, 2007
Posts: 8
|
(Msg. 20) Posted: Thu Jul 19, 2007 10:24 pm
Post subject: Re: Div Spacing Problem
Archived from groups: per prev. post (more info?)
|
|
|
On 2007-07-19 03:56:05 +0100, "Jonathan N. Little"
<lws4art.RemoveThis@centralva.net> said:
> Ste wrote:
>
>> The page in question can be found via this link:
>> http://tinyurl.com/2bk78a (it's the spacing above and below the div
>> with the pink background colour that I'm having the issues with).
>
>
> BTW for margin and padding values when '0' do not need the units and
> your menu is *white on white*, a bit hard to see...
By the way, I didn't realise the menu was white on white - it was fine
in Safari for each page other than the Contact page. I then got into
work this morning and saw how bad it was in IE7!
I think it's corrected now.
Ste |
|
| Back to top |
|
| |
External
Since: Jul 12, 2007
Posts: 8
|
(Msg. 21) Posted: Thu Jul 19, 2007 10:26 pm
Post subject: Re: Div Spacing Problem
Archived from groups: per prev. post (more info?)
|
|
|
On 2007-07-19 13:46:23 +0100, Bergamot <bergamot DeleteThis @visi.com> said:
> Gus Richter wrote:
>> Jonathan N. Little wrote:
>>> Ste wrote:
>>>
>>>> http://tinyurl.com/2bk78a
>>>
>>> your menu is *white on white*, a bit hard to see...
>>
>> Not so, just not sufficient height. Try this:
>> #main_nav { height:3em; }
>
> FYI, that wouldn't be a good solution for this particular problem. The
> "insufficient height" is caused by this container (#main_nav) having
> only floated content. Floats are out of the normal flow, so don't affect
> the container height.
>
> Setting a 3em fixed height will leave unattractive excess space when
> there is only 1 line of text and may not be high enough if it wraps to
> multiple lines. The container needs to size itself to whatever content
> it contains. There are various ways to do this, one that would work well
> in this case is described at:
> http://www.quirksmode.org/css/clearing.html
>
> However, looking at the URL, it's questionable whether the content needs
> to be floated at all. In the OP's case, replacing float:right with
> text-align:right should give the same results without the drawbacks of
> floats. I would also drop the bogus and use padding-top instead.
I've added the overflow: hidden and replaced the float: right with
text-align: right as suggested.
Things seem to be displaying okay now, though I need more content to
see how it holds out. For pages with little content, I wish I knew of
a good way of making the page stretch to nearly full screen in height
without setting a fixed height value. When the div's push up against
pages with little content, it looks so messy.
Ste |
|
| Back to top |
|
| |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Search
