[css-d] Preventing images/text from wrapping when window is narrowed

[Anne E. Shroeder]

A client handed over to me a site that had just awful code (the original 
http://www.inspiredcre8tions.com/red/) and I cleaned it up, made it more 
semantic and validated it http://www.language-works.com/RED/indexNEW.htm 
but she is griping because now the images and the footer wrap under if you 
narrow the browser window.   I'm not sure I understand the rationale for 
wanting this, since it causes a horizontal scroll, but anyhow, the client 
wants it.  I've searched around but am not finding yet any good answers.

A difference between the original version and this one is that she wanted 
absolute positioning for the top banner (and the code placed at the bottom 
of the page for SEO).

Any pointers much appreciated.

Anne



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] firefox problem

[David Laakso]

Tri-State AdVantage wrote:
> I cannot get this page to read correctly in Firefox.
> http://www.hcam.net/posts.html
>
> Kris J
>
>   


There is nothing wrong with Firefox. There is a lot wrong with your 
coding practices :-) .

Code to  Opera, FF, Safari, and IE/8. IE/7 will go along with the 
program. Fix (hack) IE/6. Once you have a functional, usable, 
cross-browser reliable basic structure working, someone can help with 
the trivial matters.

This is a first step toward that goal.


Position:fixed; is not supported in IE/6. The workaround used is here:


See also:















__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List bullet sizes

[Philippe Wittenbergh]

On Jul 8, 2009, at 1:21 PM, Bob Rosenberg wrote:

> At 23:30 -0400 on 07/07/2009, Stephen Tang wrote about Re: [css-d]
> List bullet sizes:
>
>> On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro  
>> wrote:
>>> Hi,
>>>
>>>   li {
>>> list-style-type: none;  /* remove default bullets */
>>>   }
>>>
>>>   li:before {
>>> content: "\2022"; /* hex codification •  */
>>> color: blue;
>>> margin-right: 0.3em;
>>>   }
>>>
>>> (this doesn't work in IE6)
>
> Broken IE6 strikes again. Since this is IMO the correct solution/way
> to insure the correct bullet gets used, why not use it and use a
> conditional statement to tell IE6 to just do its own thing by not
> doing these overrides.

Note that the code above won't work in IE 7 either... IE only supports  
generated content (:before/:after) starting with IE 8.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List bullet sizes

[Bob Rosenberg]

At 23:30 -0400 on 07/07/2009, Stephen Tang wrote about Re: [css-d] 
List bullet sizes:

>On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro wrote:
>>  Hi,
>>
>>li {
>>  list-style-type: none;  /* remove default bullets */
>>}
>>
>>li:before {
>>  content: "\2022"; /* hex codification •  */
>>  color: blue;
>>  margin-right: 0.3em;
>>}
>>
>  > (this doesn't work in IE6)

Broken IE6 strikes again. Since this is IMO the correct solution/way 
to insure the correct bullet gets used, why not use it and use a 
conditional statement to tell IE6 to just do its own thing by not 
doing these overrides.
-- 

Bob Rosenberg
RockMUG Webmaster
webmas...@rockmug.org
www.RockMUG.org
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List bullet sizes

[Stephen Tang]

Hi Tedd,
I presume by your URL that the answer is "No." :-)

--Stephen

On Tue, Jul 7, 2009 at 5:50 PM, tedd wrote:
> At 5:00 PM -0400 7/7/09, Stephen Tang wrote:
>>
>> Hi,
>> I have a site that was using list-style-type: disc for a list bullet.
>> The QA team noted that in IE8, the list bullets were smaller than in
>> IE7 or Firefox.  All three browsers were accessing the same CSS
>> property:
>> li {list-style-type: disc; font-size: 12px; line-height: 160%; }
>>
>>> From reading the CSS spec and some forums, is it correct that each
>>
>> browser has a different way of implementing the size of the bullet, so
>> that there is no direct way to control is in CSS?  I know the
>> list-style-image property is available, but I have run into problems
>> with vertical positioning of an image-based bullet (since
>> list-style-position isn't precise).
>>
>> Thanks,
>> Stephen
>
> Stephen:
>
> When I see a post like yours, I can't help but offer this advice:
>
> http://sperling.com/four-things-clients-should-know.php
>
> Cheers,
>
> tedd
>
> --
> ---
> http://sperling.com  http://ancientstones.com  http://earthstones.com
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List bullet sizes

[Stephen Tang]

Hi Daniel,
Thanks for this interesting idea, but I still need to support IE6.  I
also can't use a background image, because the list might be on the
right side of a floated image, and I've already experienced problems
with that.

I ended up calling an ie8.css file using an IE conditional statement
and fiddling with the line-height and font-size a little to get it
close enough.  Thanks for your input.

--Stephen

On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro wrote:
> Hi,
>
>       li {
>         list-style-type: none;  /* remove default bullets */
>       }
>
>       li:before {
>         content: "\2022"; /* hex codification •  */
>         color: blue;
>         margin-right: 0.3em;
>       }
>
> (this doesn't work in IE6)
>
> or you may use background property to place an image.
>
> 2009/7/7 Stephen Tang :
>> Hi,
>> I have a site that was using list-style-type: disc for a list bullet.
>> The QA team noted that in IE8, the list bullets were smaller than in
>> IE7 or Firefox.  All three browsers were accessing the same CSS
>> property:
>> li {list-style-type: disc; font-size: 12px; line-height: 160%; }
>>
>> >From reading the CSS spec and some forums, is it correct that each
>> browser has a different way of implementing the size of the bullet, so
>> that there is no direct way to control is in CSS?  I know the
>> list-style-image property is available, but I have run into problems
>> with vertical positioning of an image-based bullet (since
>> list-style-position isn't precise).
>>
>> Thanks,
>> Stephen
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clear floats is clearing my right hand column!!

[Gunlaug Sørtun]

Chris Blake wrote:

> A long time ago I found an easy way to clear floats.

> [...]

> I hope it's a good method because I remember being really pleased 
> because it's a lot easier than other methods that I'd found.

In your case a change from "clear: both" to "clear: left" will work.
However, having extra clearing-elements in the markup is only good for
odd cases, not as a general solution.

> http://pendulum8.com/karst.test/staff.php

For cases like that it's better to "contain floats" than to clear them.
Also, there's no need to add extra container divs just to keep images
and paragraphs together. Paragraph hold related images just fine, so why
not put those images in there, contain them, and delete the unnecessary
divs?.

Example:



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nav improvements?

[Chris Akins]

> I implemented your suggestions above (except for enclosing the UL element)
> and I am not seeing any difference with IE8 or FF3 on a PC.
>
> The main thing I'd really like to do is have the text "centered" vertically
> in the nav bar.
>
> - Greg

The page looks different than it did the other day.  I don't believe
your original post specified centering VERTICALLY.  The modifications
I made centered the unordered list horizontally.  Vertical centering
is more complex with CSS, and I'm not sure I have a solution for that
other than to play around with equal padding on the links.

But, like I said, the navigation on the page now looks completely
different than what I remember two days ago.  Looks fine in my Firefox
on the Mac.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] firefox problem

[Tim Snadden]

On 8/07/2009, at 7:44 AM, Tri-State AdVantage wrote:

> I cannot get this page to read correctly in Firefox.
> http://www.hcam.net/posts.html
> I got it to work correctly in Explorer by putting a wide border on  
> the right
> hand side of the photo so that the discription is pushed below the  
> photo.

You mention a wide 'border' but what I see is a 750px right hand  
'margin' on the image. This is apparent in IE8/7/6. Perhaps you could  
describe the effect that you want to achieve or show us a screenshot  
of the design?

I'm always suspicious any time someone says that it works in IE but  
not in Firefox. Firefox (and every other major non-IE browser) has  
superior CSS rendering capabilities so if it doesn't work in Firefox  
there's a good chance that you are doing something wrong.

I would recommend always making your site work in the non-IE browser  
of your choice and *then* do what is required to make IE get in line.  
Firefox has some great developer tools like firebug etc. so that is my  
choice but you could equally use the latest versions of Opera, Chrome  
or Safari. In most cases you will find that if you do things right  
your site will render correctly and similarly in all these browsers  
and you won't have to change anything.

Use conditional comments to isolate the rules required to get the  
various flavours of IE into line. IE8 is actually quite good as far as  
CSS 2 is concerned so as long as you are not triggering it into  
'compatibility mode' you generally shouldn't need to hack for IE8  
either.



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List bullet sizes

[tedd]

At 5:00 PM -0400 7/7/09, Stephen Tang wrote:
>Hi,
>I have a site that was using list-style-type: disc for a list bullet.
>The QA team noted that in IE8, the list bullets were smaller than in
>IE7 or Firefox.  All three browsers were accessing the same CSS
>property:
>li {list-style-type: disc; font-size: 12px; line-height: 160%; }
>
>>From reading the CSS spec and some forums, is it correct that each
>browser has a different way of implementing the size of the bullet, so
>that there is no direct way to control is in CSS?  I know the
>list-style-image property is available, but I have run into problems
>with vertical positioning of an image-based bullet (since
>list-style-position isn't precise).
>
>Thanks,
>Stephen

Stephen:

When I see a post like yours, I can't help but offer this advice:

http://sperling.com/four-things-clients-should-know.php

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] List bullet sizes

[Stephen Tang]

Hi,
I have a site that was using list-style-type: disc for a list bullet.
The QA team noted that in IE8, the list bullets were smaller than in
IE7 or Firefox.  All three browsers were accessing the same CSS
property:
li {list-style-type: disc; font-size: 12px; line-height: 160%; }

>From reading the CSS spec and some forums, is it correct that each
browser has a different way of implementing the size of the bullet, so
that there is no direct way to control is in CSS?  I know the
list-style-image property is available, but I have run into problems
with vertical positioning of an image-based bullet (since
list-style-position isn't precise).

Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] firefox problem

[Tri-State AdVantage]

I cannot get this page to read correctly in Firefox.
http://www.hcam.net/posts.html
I got it to work correctly in Explorer by putting a wide border on the right
hand side of the photo so that the discription is pushed below the photo.
That is not working in Firefox and the paragraph is over the photo. I would
appreciate some tips on how to make it work in Firefox with out causing
problems in Explorer.
here is a link to my style sheet.
http://www.hcam.net/newstyles.css
Thank you
Kris J

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clear floats is clearing my right hand column!!

[Bobby Jack]

--- On Tue, 7/7/09, Chris Blake  wrote:

> Anyway, I have just dropped it into the page I am having a
> small issue with and it has gone crazy! It's clearing the right
> column!

I'm not sure I'm even seeing the problem (in Firefox) - can you be specific as 
to which element is misbehaving?

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clear floats is clearing my right hand column!!

[David Laakso]

Chris Blake wrote:
>
> http://pendulum8.com/karst.test/staff.php
> http://pendulum8.com/karst.test/styles/style2.css
>
> It's a real basic grid so I am little annoyed that it is causing so  
> many problems. Any advice or criticism is welcome.
>
> Thanks, CB
>   



Validate before you post.












__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clear floats is clearing my right hand column!!

[Chris Blake]

http://pendulum8.com/karst.test/staff2.php

Seems to have fixed it on my tests. I will have to swap staff2.php and  
staff.php now but in case you want to explain why the old method  
wasn't working you can still see it - just moved to staff2.php

Thanks, CB

On 08/07/2009, at 12:36 AM, Chris Blake wrote:

> Can i reply to my own post?
> What about this method:
> http://dtott.com/thoughts/2009/01/06/clear-your-floats-even-easier/
> Seems even easier and logical. I would need to put the IE Hack in  
> without using a separate style sheet so if anyone knows how i would  
> do that in this style sheet then I would be very grateful.
>
> CB
>
> I will make a staff2.php to test this new method.
>
>
> On 08/07/2009, at 12:17 AM, Chris Blake wrote:
>
>> Hi,
>>
>> A long time ago I found an easy way to clear floats. It's basically:
>>
>>  
>>
>> and
>>
>> .clear{
>> clear:both;
>> height:1px;
>> line-height:1px;
>> margin:0;
>> padding:0;
>> }
>>
>> I hope it's a good method because I remember being really pleased
>> because it's a lot easier than other methods that I'd found.
>>
>> Anyway, I have just dropped it into the page I am having a small  
>> issue
>> with and it has gone crazy! It's clearing the right column!
>> Take a look:
>>
>> http://pendulum8.com/karst.test/staff.php
>> http://pendulum8.com/karst.test/styles/style2.css
>>
>> It's a real basic grid so I am little annoyed that it is causing so
>> many problems. Any advice or criticism is welcome.
>>
>> Thanks, CB
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
>

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nav improvements?

[Greg Wilker]

> -Original Message-
> From: Chris Akins [mailto:tipper...@gmail.com]
> Subject: Re: [css-d] nav improvements?
> 
> On Mon, Jul 6, 2009 at 2:22 PM, Greg Wilker wrote:
> >
> > I would like to improve the current top navigation with the following:
> >
> > 1. center text/links in middle of bar
> >
> > 2. narrow bar height
> 
> With the current HTML and CSS, I made these modifications to the CSS
> and got what you wanted (I think) in Firefox, Mac.  That's all I've
> tested it in, but it might be a start:
> 
> #navMid   {
>   background: url(/htn/graphics/nav_mid.gif) repeat-y;
>   padding: 0px 0px 0px 9px;
>   vertical-align: text-bottom;
> }
> 
> #navMid ul {width:98%; margin:0 auto;}
> 
> Along with the above, I added a  just after
> the closing  for the #navMid ul
> 
> Having said that, I think  you could get around having to add that
> clearing element if you let the  ENCLOSE the ul
> rather than be a separate element.  I haven't tested that, but I
> believe it would work.  Then, just set the background image on #navTop
> to be at the top with no-repeat.   I believe that should work.


I implemented your suggestions above (except for enclosing the UL element)
and I am not seeing any difference with IE8 or FF3 on a PC.

The main thing I'd really like to do is have the text "centered" vertically
in the nav bar.

- Greg

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clear floats is clearing my right hand column!!

[Bobby Jack]

--- On Tue, 7/7/09, Chris Blake  wrote:

> Anyway, I have just dropped it into the page I am having a
> small issue with and it has gone crazy! It's clearing the right
> column!

I haven't looked at your CSS/markup in detail, but it sounds very much like 
you're running into this issue:

http://www.fiveminuteargument.com/clear-as-mud

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clear floats is clearing my right hand column!!

[Chris Blake]

Hi,

A long time ago I found an easy way to clear floats. It's basically:

 

and

.clear{
clear:both;
height:1px;
line-height:1px;
margin:0;
padding:0;
}

I hope it's a good method because I remember being really pleased  
because it's a lot easier than other methods that I'd found.

Anyway, I have just dropped it into the page I am having a small issue  
with and it has gone crazy! It's clearing the right column!
Take a look:

http://pendulum8.com/karst.test/staff.php
http://pendulum8.com/karst.test/styles/style2.css

It's a real basic grid so I am little annoyed that it is causing so  
many problems. Any advice or criticism is welcome.

Thanks, CB
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/