Re: [css-d] I've died and gone to CSS hell

[david]

John Wells wrote:

> Don't know if your remember this or not, but back some time ago I
> emailed about a three-column layout that was killing me. A helpful
> soul suggested using "display:table-cell" to fix my problem, and it
> did!...except, not really in IE.
> 
> So, I finally relented. I gave up. I admitted defeat. I cried for
> awhile. Then, I picked myself up...looking forward to the certain
> simplicity a two column layout was sure to bring. I mean, three is
> hard...but two? Come on...we should all be able to do THAT in our
> sleep.
> 
> Wrong...wrong for me anyway. I must be css-layout challenged.

You can find good working layouts at Layout Gala:

http://blog.html.it/layoutgala/

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Beginners first full CSS site check please :-)

[KJ]

Hello all,



This is my very first full CSS site.

Basically I'm creating it for a friend, so it isn't **that** important, but
I am still looking at it as a challenger for me to see how much I can learn.



The basic site without any actual content can be found here:

*http://www.rudisbutchery.com.au/shanedance/Untitled-1.html*



Access to all the files, including the CSS file is available in this
directory:

*http://www.rudisbutchery.com.au/shanedance/*



I have tried to make the whole site pretty much fluid, so the first thing I
hope that somebody can test is that the site scales ok when the window is
resized horizontally.

Second, I don't have a range of browsers to test on, so I was hoping that
those with different browsers may be able to check for me if the site
renders ok across most multiple common platforms. I have used heaps of
tutorials and templates from around the internet for the fundamental
construction of the sites layout, using those templates that seemed to be
highly compatible, and then modified them to suit my needs. So fingers
crossed the site works ok….

And finally, is there anything I am doing so far that is a 'no, no' in CSS?
Or any tips/tricks that might make things work better?



The site currently seems to work ok for me on my PC when viewed using IE7
and Firefox 2.

An image of what I hope you will all see this site looking like, on your
PC's, can be found here:

*http://www.rudisbutchery.com.au/shanedance/images/siteview.jpg*





Basically I am just hoping for some feedback on the site before I start to
spend time on creating the actual content/menus etc …

Is the site working, and is it somewhat compatible with different platforms,
and does it display on your PC like it is displaying for me???



Thank you all greatly for any time you can give,

It is greatly appreciated.

Thanks kindly,

Cheers

KJ
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've died and gone to CSS hell

[Blake Haswell]

On 4/28/07, John Wells <[EMAIL PROTECTED]> wrote:
> Blake,
>
> Seems to prevent pushing the #content div below the #navigation div, but it 
> still allows overlap. Anyway to get around this?

Umm... Try word-wrap: break-word; ... It's not supported in Firefox
yet, but I think it's supported in IE and in Safari. I haven't done
any testing with it, though, so your mileage may vary.

Other than that, maybe you could throw overflow: auto; on the #content
div, but it's not exactly pretty.

-- 
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've died and gone to CSS hell

[John Wells]

- "Blake Haswell" <[EMAIL PROTECTED]> wrote:
> Have you tried using absolute positioning? Floats have a nasty habit
> of breaking in IE.

Blake,

Seems to prevent pushing the #content div below the #navigation div, but it 
still allows overlap. Anyway to get around this?

Thanks!
John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've died and gone to CSS hell

[John Wells]

- "Chief Technology Officer" <[EMAIL PROTECTED]> wrote:
> I ran into this numerous times. It may not be the best solution, but
>
> it worksd for me.
>
> Your navigation is 20% with right margin of 5% and the Content is 75%
>
> = 100%.
>
> Try using 73 or 74% for width.

Chief,

Unfortunately, no dice. Still breaks in both FF and IE as described :(.

Thanks for trying though...I think it may be complicated by the fact that 
#content contains a table.

John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've died and gone to CSS hell

[Lori Lay]

John Wells wrote:
> Guys,
>
> Don't know if your remember this or not, but back some time ago I emailed 
> about a three-column layout that was killing me. A helpful soul suggested 
> using "display:table-cell" to fix my problem, and it did!...except, not 
> really in IE.
>
> So, I finally relented. I gave up. I admitted defeat. I cried for awhile. 
> Then, I picked myself up...looking forward to the certain simplicity a two 
> column layout was sure to bring. I mean, three is hard...but two? Come 
> on...we should all be able to do THAT in our sleep.
>
> Wrong...wrong for me anyway. I must be css-layout challenged.
>
>
>   

I sympathise.  Having just gone through the same process, I can 
definitely sympathise.  Personally I found that there is so much 
information out there, that it is very difficult to pick a design.

If you want to have a look at some layouts that may work, I suggest you 
have a look at some of the following links.  For your site, a fixed 
layout might be best.  If you want the design to adapt to the width of 
the browser, have a look at the fluid layouts.  The major differences is 
that fixed layouts are sized using pixels or ems and fluid layouts are 
sized using percentages.

First, there is a page in the CSS Discuss wiki:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts


Even though this is for 3 column layouts, most can be made into 2 
columns fairly easily.

In this list, some of the more active and recognised sites are Position 
is Everything, Holly 'n John or Holly Bergevin, Alex Robinson and 
Thierry Koblentz.  That's not to say the others aren't as good, these 
are just starting points to try to filter things for you a little bit.  
I actually wound up adapting Paul O'Brien's work.  There's also Bruno 
Fassino's site, which I didn't see listed: http://www.brunildo.org/test/

One thing that you may like is the improved Piefecta page maker 

 
by ClevaTreva.  There's a link to this from Position is Everything 
.

In terms of your layout, one thing I notice right-off-the-bat is that I 
don't think your widths add up.  You have to remember that in the box 
model, the width is only the width of the content.  On to that you have 
to add margins and padding.  You have the header at 80% and the 
navigation at 20% with a 5% margin.  So I think your header needs to be 
75% - if you want the navigation to run up alongside the header.  
Lastly, I don't think you have enough divisions to contain everything - 
sorry!

Sorry I can't help you more with your layout.  Others on the list may be 
able to do that.

Lori
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've died and gone to CSS hell

[Blake Haswell]

On 4/28/07, John Wells <[EMAIL PROTECTED]> wrote:
> I'm so defeatedI need help.

Have you tried using absolute positioning? Floats have a nasty habit
of breaking in IE.

Something like this:








#container {
position: relative; // position hook for #nav
}

#nav {
position: absolute;
top: 0;
left: 0;
width: 25%;
}

#content {
padding-left: 25%; // width of #nav
}

-- 
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Thierry Koblentz]

> #parent
> {
> /* center child in IE */
> text-align: center;
> }

I believe this is true for IE  in *quirks mode*.

---
Regards,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] I've died and gone to CSS hell

[John Wells]

Guys,

Don't know if your remember this or not, but back some time ago I emailed about 
a three-column layout that was killing me. A helpful soul suggested using 
"display:table-cell" to fix my problem, and it did!...except, not really in IE.

So, I finally relented. I gave up. I admitted defeat. I cried for awhile. Then, 
I picked myself up...looking forward to the certain simplicity a two column 
layout was sure to bring. I mean, three is hard...but two? Come on...we should 
all be able to do THAT in our sleep.

Wrong...wrong for me anyway. I must be css-layout challenged.

So, I have essentially five key divs, that go like this:


  
  
  
  


I've been through various incarnations of css layout so far...the latest is 
here:

#header {
padding:0px;
margin:0px;
width:80%;
clear:both;
}

#navigation {  
  width:20%;
  float:left;
  margin-right:5%;
}

#content {
  float:right;
  width:75%;   
}

#footer {
  text-align: left;
  clear: both;
}

As you can see, pretty simple. And it works wellthat is, until the window 
shrinks so that there's not enough space to display both divs. Then, the 
ugliness begins. In firefox, it's less ugly but still ugly...the content div 
overlays the navigation div. Not the behavior I want. In IE, it's even 
nastier...the content div simply drops below the navigation div...you can't 
even see it anymore unless you scroll WAY down. What I wish would happen is 
that scroll bars are display in the browser window...and that the divs would 
shrink just to the point that they almost touch but don't overlap.

I've tried various ways to fix this...and it appears giving outer_wrapper a 
width works in Firefox. But, it doesn't in IE.

I'm so defeatedI need help.

Would anyone care to login to my app and take a look? Here's the info:

http://www.foloup.com
username: css
password: mobydick

I would really, really appreciate any guidance you can provide.

Thank you!
John
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Paul Novitski]

At 4/27/2007 04:04 PM, Lori Lay wrote:
>[EMAIL PROTECTED] wrote:
> > If you change your CSS to the following it will work.
> >
> > #footer {
> >   height:50px;
> >   position:relative;
> > }
> > #footwrap
> > {
> >   position:absolute;
> >   bottom:0;
> >   width:100%;
> > }
> > #footwrap p
> > {
> >   text-align:center;
> > }
> >
>
>I got this reply off-list.  Changing the code as suggested above and
>adding left: 0; to #footwrap worked like a charm.


Another principal at work here is that IE applies text-align not just 
inline elements but to block-level elements as well.  So, for 
instance, a standard way to center a block cross-browser has been:


 
 [content...]
 



#parent
{
 /* center child in IE */
 text-align: center;
}
#child
{
 /* center child in compliant browsers */
 margin: 0 auto;

 /* don't center child's contents (correction for IE hack) */
 text-align: left;
}

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Paul Novitski]

At 4/27/2007 03:28 PM, Lori Lay wrote:
>I would like to vertically align and centre some text at the bottom of a
>division.
...
>
> 
>   Here is the text I want to centre on the bottom
> 
>
>
>CSS:
>
>#footer {
> text-align: center;
> position: relative;
> width: 100%;
> height: 50px;
> clear: both; }
>
>#footwrap {
> position: absolute;
> bottom: 0; }
>
>Here's the problem:  the text is properly aligned at the bottom of the
>footer, but only the start of the paragraph is horizontally centred.  As
>you can see, I am using text-align: center to centre the text.  This
>doesn't work in this case (in IE 6 only).  The start of the paragraph is
>correctly centred, but not the whole thing.  So in my example above, the
>word Here seems to be centred, but not the entire line.


According to the spec [1] text-align should be inherited, so perhaps 
you've stumbled across one of the many spots where IE6 drifts away 
from the spec either deliberately or buggily.

I would try applying centering to the paragraph itself with #footwrap 
p { text-align: center; }

You might also be able to diagnose the problem more clearly if you 
apply a background-color to the paragraph.  Does that show that the 
first line is centered and the others are flush-left?

[1] CSS 2.1 Specification : 16 Text : 16.2 Alignment: the 'text-align' property
http://www.w3.org/TR/CSS21/text.html#alignment-prop

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

Mauricio Samy Silva wrote:
> Hi Lori,
> Try the following CSS:
>
> #footer {
>position: relative;
>width: 100%;
>height: 50px;
>clear: both; }
>
> #footwrap p {
>   width:100%;
>   margin:0 auto;
>   position: absolute;
>   bottom: 0;
>   text-align:center;
> }
>
> Regards,
>
> Maurício Samy Silva
> http://www.maujor.com/
>
>
Thanks Maurício that works too.  Two solutions in ten minutes - beauty!!

Lori
>
>> I would like to vertically align and centre some text at the bottom of a
>> division.  In compliant browsers, I can accomplish this by using
>> display: table and display: table-cell with vertical-align: bottom.
>> This works like a charm.
>>
>> However, in IE 6, I have an odd problem.  I 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

[EMAIL PROTECTED] wrote:
> If you change your CSS to the following it will work.
>
> #footer {
>   height:50px;
>   position:relative;
> }
> #footwrap
> {
>   position:absolute;
>   bottom:0;
>   width:100%;
> }
> #footwrap p
> {
>   text-align:center;
> } 
>   

I got this reply off-list.  Changing the code as suggested above and 
adding left: 0; to #footwrap worked like a charm.

Thanks Scott.

> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Lori Lay
> Sent: Friday, April 27, 2007 5:29 PM
> To: CSS-discuss
> Subject: [css-d] Vertically Aligning Text in Division - IE 6 Problem
>
> ...
> Here's the problem:  the text is properly aligned at the bottom of the
> footer, but only the start of the paragraph is horizontally centred.  As
> you can see, I am using text-align: center to centre the text.  This
> doesn't work in this case (in IE 6 only).  The start of the paragraph is
> correctly centred, but not the whole thing.  So in my example above, the
> word Here seems to be centred, but not the entire line.
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Mauricio Samy Silva]

Hi Lori,
Try the following CSS:

#footer {
position: relative;
width: 100%;
height: 50px;
clear: both; }

#footwrap p {
   width:100%;
   margin:0 auto;
   position: absolute;
   bottom: 0;
   text-align:center;
 }

Regards,

Maurício Samy Silva
http://www.maujor.com/



> I would like to vertically align and centre some text at the bottom of a
> division.  In compliant browsers, I can accomplish this by using
> display: table and display: table-cell with vertical-align: bottom.
> This works like a charm.
>
> However, in IE 6, I have an odd problem.  I 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

Hi,

I would like to vertically align and centre some text at the bottom of a 
division.  In compliant browsers, I can accomplish this by using 
display: table and display: table-cell with vertical-align: bottom.  
This works like a charm.

However, in IE 6, I have an odd problem.  I have read that the 
work-around to IE's lack of display: table support is to use absolute 
positioning.  Here's a mock-up of the code:



  Here is the text I want to centre on the bottom



CSS:

#footer {
text-align: center;
position: relative;
width: 100%;
height: 50px;
clear: both; }

#footwrap {
position: absolute;
bottom: 0; }

Here's the problem:  the text is properly aligned at the bottom of the 
footer, but only the start of the paragraph is horizontally centred.  As 
you can see, I am using text-align: center to centre the text.  This 
doesn't work in this case (in IE 6 only).  The start of the paragraph is 
correctly centred, but not the whole thing.  So in my example above, the 
word Here seems to be centred, but not the entire line.

Does anybody have any ideas?

Thanks,

Lori
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera 9.20: jumping float on resized viewport

[Alan Gresley]

On April 28, 2007, Stephen wrote:

> Hi
> 
> I tried to make a minimal test case for this, but can't seem to trigger 
> it without quite a substantial chunk of the original page.
> 
> Page in question: http://www.stourmusic.org.uk/concerts
> The problem:
> 
> In Opera 9.20 (build 8771) on Windows XP, the left-floated 'Contact Us' 
> block in the #nav div jumps down by 24px (maintaining the same 
> horizontal positioning) when I shrink the viewport to 890px wide or 
> below, losing vertical alignment with the other links in that same div.
> 
> Any ideas?
> 
> Thanks
> 
> Stephen

Hi Stephen

It odd that you should mention the left floated 'Contact Us' since that is not 
what you have. Your CSS shows that it is display inline. You current CSS is.

#nav li {
display:inline;
}

A left float and 0 margin will solve the problem.

#nav li {
float:left;
margin: 0;
}

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE 6 sticky bug

[Jed Arnold]

I'm working on a site and wanted to make the default page more dynamic by
adding CSS image pop-ups to my  links. I adapted code from Nathan
Smith's HoverBox technique.

My code is working fine in FF, IE 7/Win, Opera and Moz, but IE 6/Win is
giving me a problem. The images (initiated by a:hover) are staying on the
screen in IE6.

The images are squashed, I haven't loaded new size-specific images yet.

The site can be viewed here,
http://the1912gallery.ehc.edu/music/newsite/textlinktest.html. The CSS is
embedded.

Any ideas or help?



Thanks in advance.

Best,
Jed

-- 
Jed Arnold
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Liquid Adaptive Pullout

[Zoe M. Gillenwater]

Sébastien FICHOT wrote:
> I wonder if someone knows how to make a liquid pullout. All pullouts i've 
> seen for now use fixed width, and floats columns, i let you imagine what if 
> the browser windows is reduced...
>   

Hi Sébastien,

I don't know if you and I are using the same definition for pullout (I'm 
imagining a div containing a pullquote), but if so, all you need to do 
to make it liquid is change its width to a percentage value.

We could provide more pertinent information if you would provide a URL 
to an example of what you are talking about, or a mockup of what you 
want to do.

Best,
Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Photos not staying in , and lightbox issues

[Daniel Hammond]

| > Why aren't my photos staying in the content div? I've colored the
| > background of the div green so you can see where it is.
| 
| Decent browsers won't "contain" floats unless they are told to.
| 
| #content {float: left;}
| ...will be a suitable "containment-command" in your case, since floats
| with default height (no height) will always contain floating children.
| 
| > URL: www.objectivedesigns.com/2/photography.htm
| 
| regards
|   Georg

Thanks Georg, that fixed that problem. Now does anyone have any light to
shed on the lightbox issue? That part of my original message has been
clipped, so I'll repeat it here:

I'm trying to use the lightbox technique
(http://www.huddletogether.com/projects/lightbox2/) for viewing the images
full-size, but it's not working correctly. I've only coded the first (top
left) image for lightbox, so don't worry about the rest of them right now.

URL: www.objectivedesigns.com/2/photography.htm

CSS: www.objectivedesigns.com/2/index.css

Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] DIV wrapping a variable DIV

[Glen Lipka]

Thanks for the replay/effort.  Unfortunately, this doesn't work.

The use case is fairly simple.  I am building an html editor that works on
TOP of other people's html.
I am positioning all of my stuff absolutely.  So I need to reference the top
left corner of whatever html is part of the "template". The template might
be centered.  It might be left justified.  It could even be on the right.  I
just need to grab the top-left corner with something positioned so my child
elements will know where to reference.

When I put an element around whatever html is on the template, it either
expands 100%, which is no good or acts bizarre.

Does this help explain the scenerio?

Thanks again.

Glen

On 4/26/07, Bruno Fassino <[EMAIL PROTECTED]> wrote:
>
> Glen Lipka wrote:
>
> > I made a sample page to demonstrate the problem.
> > http://www.commadot.com/jquery/simple.htm
> >
> > I want to wrap a div around another div. The second DIV is of unknown
> > height/width and may be positioned left or center.  The first
> > div must wrap TIGHT around the contents of the second DIV.
> > It can't expand 100%.
> > The reason is that I am positioning something absolutely on top of
> > unknown content.  I therefore need the top left point of the unknown
> > content for positioning reference.
>
> The second part of your message and something in your page made me unclear
> about what you really want to achieve, anyway...
>
> You mentioned a table and indeed I believe it solves your problem (why do
> you say it don't work in the left aligned case?) A table with a /single/
> cell and no specified width  usually shrink-wraps its content. And the
> whole
> table can be either left-aligned or centered (with margin: 0 auto, same as
> for centering block elements.)
>
> Difficulties arise if you want to avoid the use of a table, which is
> semantically incorrect. You can use display:table and display:table-cell,
> for browsers supporting them. This unfortunately leaves out IE.
> Another way to shrink-wrap content that is at least partially supported by
> IE is display:inline-block (and an "inline-block" can be either
> left-aligned
> or centered.) Unfortunately display:inline-block is not supported by
> Firefox
> at the moment (it will soon be.)
> You could combine the two things, using hacks to serve different
> declarations to different browsers (but I believe this is going to be more
> complicated than useful), you can have a look at some tests I did about
> this
> [1], [2].
>
>
> Hth,
> Bruno
>
> [1] http://www.brunildo.org/test/shrink_center_3.html
> [2] http://www.brunildo.org/test/shrink-to-fit.html
>
> --
> Bruno Fassino http://www.brunildo.org/test
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] iframe background not showing through IE -FIXED

[Ian Young]

Subject: iframe background not showing through IE


  Greetings List

  First time using iframe to connect to external server. Works fine in FF
but background is not showing through in IE.
  Have tried making background transparent - nada. If I reduce the size of
the frame to the size of the picture then the pics load on the centre of the
page then flick to the left.

  Any thoughts?

  Hah! fixed by setting the width to 270px; and adding margin-right:auto.

  Ian
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.463 / Virus Database: 269.6.1/777 - Release Date: 26/04/2007
15:23
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] iframe background not showing through IE

[Ian Young]

Greetings List

First time using iframe to connect to external server. Works fine in FF but
background is not showing through in IE.
Have tried making background transparent - nada. If I reduce the size of the
frame to the size of the picture then the pics load on the centre of the
page then flick to the left.

Any thoughts?

Ian
**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.463 / Virus Database: 269.6.1/777 - Release Date: 26/04/2007
15:23
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera 9.20: jumping float on resized viewport

[Stephen Lewis]

[Apologies if this turns up twice: I sent it the first time from an 
address that wasn't subscribed.]

Hi

I tried to make a minimal test case for this, but can't seem to trigger 
it without quite a substantial chunk of the original page.

Page in question: http://www.stourmusic.org.uk/concerts
CSS: http://www.stourmusic.org.uk/stylesheets/base.css
Screenshot: http://www.sock.org.uk/volatile/opera.png

The problem:

In Opera 9.20 (build 8771) on Windows XP, the left-floated 'Contact Us' 
block in the #nav div jumps down by 24px (maintaining the same 
horizontal positioning) when I shrink the viewport to 890px wide or 
below, losing vertical alignment with the other links in that same div.

Any ideas?

Thanks

Stephen

-- 
Stephen Lewis
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE layout issues

[natalie parker]

Dave Goodchild wrote:
> Hi all, I have been ambushed by IE6. URL:
> 
> http://dontjustsitthere.co.uk
> 


First off, you have a couple of mark-up errors and one css error (the ; 
after #fbf0f8):

.logbox{
background:#fbf0f8;url(/images/log.png) no-repeat 99% 10%
}

Second, you didn't really say "what happens in ie6" so I'll address the 
most obvious issue I see (which I'm also seeing in firefox 2.0.0.3) 
which is that your #displayads div is moving around in an 800px width 
browser. This appears to be caused by the fact that #content is set at 
80%, but .homeimage is 130px wide, .homecontent is 300px, and .shop is 
230px which is 660px plus the space between the boxes. Also, #content li 
is 43em wide inside a 300px .homecontent box (which may not even be 
contributing to the effect, but I noticed it, so I mentioned it). Then, 
#wrapper is set to a min-width of 600px, which is about 100px smaller 
than everything in #content which leaves no room for #displayads. In 
ie6, #displayads drops below #content, and in ff it overlaps.

So, from what I can tell, you can either raise the min-width of #wrapper 
to around 1024px (or whatever gets it to fit into ie6 - you may also 
need to lower the width of #content or #displayads width by 2% or so), 
or make your content boxes narrow enough to fit into 80% of 98% 
(#wrapper width) of 800px.

I hope this helps.
nat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Liquid Adaptive Pullout

[Sébastien FICHOT]

Hi everyone,

I wonder if someone knows how to make a liquid pullout. All pullouts i've 
seen for now use fixed width, and floats columns, i let you imagine what if 
the browser windows is reduced...

Thank you for any answer or workArround.

Sébastien - France

_
Gagnez des écrans plats avec Live.com http://www.image-addict.fr/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Issue with negative margins

[Stefano Guandalini]

Alle 13:55, venerdì 27 aprile 2007, Gunlaug Sørtun ha scritto:
> Stefano Guandalini wrote:
> > After googling a lot I coudn't find any solution to my problem, so...
> >
> >
> > viewing http://ezpdemo.nizan.net with ie6 (ie7 also, I think)
> >
> > in the right column the first link in the News and E.C.D.L. boxes are
> > not working due to the margin-top in content.css (line 1460)
>
> Add some well-placed 'hasLayout'[1] triggers...
>
> .class-folder ul, .class-documentation-page ul {width: 100%;}
>
> ...and IE/win will "space out" the relevant elements and reveal the links.
>
>
> Hope it's ok that I mention "divitis" and "classitis" after looking at
> that page :-)
>
:-D sure you can.

Thank you, now is works perfectly (since next IE issue :-( )

> regards
>   Georg
>
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html

-- 
Stefano Guandalini
sguandalini AT nizan PUNTO net
R&D manager
mobile +39 338 8874518
http://www.nizan.it
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Issue with negative margins

[Gunlaug Sørtun]

Stefano Guandalini wrote:
> After googling a lot I coudn't find any solution to my problem, so...
> 
> 
> viewing http://ezpdemo.nizan.net with ie6 (ie7 also, I think)
> 
> in the right column the first link in the News and E.C.D.L. boxes are
> not working due to the margin-top in content.css (line 1460)

Add some well-placed 'hasLayout'[1] triggers...

.class-folder ul, .class-documentation-page ul {width: 100%;}

...and IE/win will "space out" the relevant elements and reveal the links.


Hope it's ok that I mention "divitis" and "classitis" after looking at
that page :-)

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] using id AND class?

[Melianor]

Actually the one version that works across all browsers, is to simply call


div.home {
instead of
div#holder.home {

If you want to access the #holder
call div#holder, otherwise just div.home

regards, Jens

On 4/27/07, james shannon <[EMAIL PROTECTED]> wrote:
> It should validate fine; it's a perfectly legal construction.
>
> One good reason for using it is to add specificity. div.home might be
> defined elsewhere, and div#holder.home is far more specific and thus
> will override it (thought I'd use other methods).
>
> Also useful when you have lots of pages and need to keep things
> separate. There's probably a 
> elsewhere on the site.
>
>
>
> I use something similar in that I have a container div that can have
> two different display settings: advanced and basic. So I define a
> bunch of stuff like:
>
> div#question.basic .advanced_options {display:none;}
> div#question.advanced .subquestion {color: red;}
> etc.
>
>
> james
>
>
> On Apr 27, 2007, at 2:33 AM, Austin Harris wrote:
>
> > Morning all,
> >
> > I am doing some work on a site that I haven't built and have found
> > something slightly strange...
> >
> > basis of html;
> >
> > 
> >
> > blah blah
> >
> > 
> >
> > css;
> >
> > div#holder.home {
> > styles...
> > }
> >
> > Strangely this does work across all the browsers I have (briefly)
> > tested on yet does cause validation errors.
> >
> > I can't see any issues as to why taking out the #holder from the
> > css will make any difference but was really more wondering why
> > someone would have done this in the first place...
> >
> > Austin
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7 information -- http://css-discuss.incutio.com/?page=IE7
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE layout issues

[Dave Goodchild]

Hi all, I have been ambushed by IE6. URL:

http://dontjustsitthere.co.uk

...as I have upgraded to IE7 I only found out about this yesterday (layout
was tested thoroughly before I made some changes to the homepage). What a
mess - anyone got any ideas what is happening in IE6 and a possible
solution?

-- 
http://www.web-buddha.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] using id AND class?

[james shannon]

It should validate fine; it's a perfectly legal construction.

One good reason for using it is to add specificity. div.home might be  
defined elsewhere, and div#holder.home is far more specific and thus  
will override it (thought I'd use other methods).

Also useful when you have lots of pages and need to keep things  
separate. There's probably a   
elsewhere on the site.



I use something similar in that I have a container div that can have  
two different display settings: advanced and basic. So I define a  
bunch of stuff like:

div#question.basic .advanced_options {display:none;}
div#question.advanced .subquestion {color: red;}
etc.


james


On Apr 27, 2007, at 2:33 AM, Austin Harris wrote:

> Morning all,
>
> I am doing some work on a site that I haven't built and have found  
> something slightly strange...
>
> basis of html;
>
> 
>
> blah blah
>
> 
>
> css;
>
> div#holder.home {
> styles...
> }
>
> Strangely this does work across all the browsers I have (briefly)  
> tested on yet does cause validation errors.
>
> I can't see any issues as to why taking out the #holder from the  
> css will make any difference but was really more wondering why  
> someone would have done this in the first place...
>
> Austin
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] using id AND class?

[Austin Harris]

Morning all,

I am doing some work on a site that I haven't built and have found something 
slightly strange...

basis of html;



blah blah



css;

div#holder.home {
styles...
}

Strangely this does work across all the browsers I have (briefly) tested on yet 
does cause validation errors.

I can't see any issues as to why taking out the #holder from the css will make 
any difference but was really more wondering why someone would have done this 
in the first place...

Austin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Issue with negative margins

[Stefano Guandalini]

After googling a lot I coudn't find any solution to my problem, so...

viewing http://ezpdemo.nizan.net with ie6 (ie7 also, I think)

in the right column the first link in the News and E.C.D.L. boxes are not 
working due to the margin-top in content.css (line 1460)

div#main div.itemized_sub_items ul {
list-style-type:none;
margin-left:0pt;
margin-top:-2em;
}

Any way to solve this without altering the aspect?

Thank you

-- 
Stefano Guandalini
sguandalini AT nizan PUNTO net
R&D manager
mobile +39 338 8874518
http://www.nizan.it
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Mac/Safari layout problem

[Gunlaug Sørtun]

Mark Kamian wrote:
> Can someone help me determine why Mac/Safari is pushing the sidebar 
> of the following page down below the main content div?  I've spent a 
> long time finagling the widths, margins, etc... of the relevant divs 
> and other elements but to no avail!
> 
> http://www.idxsolutions.com/default50.asp

Can't see any such problem in Safari 2, but if it _is_ a problem then a
negative backside margin on the floating #content will solve it.

#content {margin-right: -5px;}

...should do fine across browser-land.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/