[css-d] element height problem in IE

[Andrew Mason]

Hi,

Everything seemed to be working with my site, then I noticed that the  
main element height extends down a couple hundred extra pixels in  
IE.  Anyone know why it would do this?

http://www.smandrew.com/dutch/

Thanks!

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

Re: [css-d] 3 column top margin

[Michael ORourke]

 > HTML and CSS are located here:
> 
> http://karaokesource.com/template.php
> http://karaokesource.com/karaoke.css
> 
> 1. I need to have the 3 columns butt up against the magenta bar. I've  
> been working on this for over a day and can't seem to get it right.
> 
> 2. The center column div has the golden background. The center column  
> #content div has a white background with a 1 em margin on all sides.  
> On the left and right sides, the golden color shows through. This is  
> what I expect. However, I want the same  1 em golden color to show at  
> the top and bottom of content. Pointers please.

Remove margin from #content,
 remove margin and change padding to 1em in .centercolumn, 
change width in .rightcolumn to 13.1em.

Works in Firefox, didn't check anything else.

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

Re: [css-d] Strange float issue with Explorer 6

[Gunlaug Sørtun]

Alisha wrote:
> Just to be sure... really no one has any idea about what is causing 
> this and how to fix it?

>> http://www.synthetic-effulgence.com/glitch/home.html

Sure, just add:

#main h3  {
float: left;
margin-right: -150px;
}

IE/win is unable to let elements overflow, so a 100% wide element
becomes too wide. IE will drop the element below that side column.
The styles above makes h3 appear to be 150px narrower to all
browsers, so now it will fit in IE/win too.

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

[css-d] Creating a Standard DIV

[Jason Benefield]

I help maintain a static website that compliments a magazine.  The
magazine posts a wide variety of articles from their magazine on their
website.
 
Most of these articles are written in the same format as a newspaper,
i.e. they have picture inserts with text below them.
 
This is where my problem exists.
 
I want to create a standard DIV that will accompany the image size (and
the image size could any size, it varies often), but not allow the text
below the image to extend beyond the edges of the image width.
 
If I create a DIV with a set width, it works.  However, I need to create
a DIV that can be placed in an external style sheet and used over and
over again.
 
A link to a sample page this is:
 
http://www.twmag.com/renegade-roads/rroads-08-05.htm
 
In this page you can see several images where the text does not extend
beyond the image edges.  These images are placed in DIVs and floated
right or left.
 
 
I have tried numerous variations on this and have yet to find something
that works.  Setting the DIV at a small width doesn't work, nor does
setting the DIV to width:auto.
 
Is this even possible?
 
 
Thank you for the help!
 
 
 
Jason
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Strange float issue with Explorer 6

[matt andrews]

On 03/12/05, Alisha <[EMAIL PROTECTED]> wrote:
> I don't really know how tom explain this issue. but anyway... here's the
> css and xhtml which are driving me crazy.
>
> http://www.synthetic-effulgence.com/glitch/home.html
> http://www.synthetic-effulgence.com/glitch/style.css

It seems to me that the problem is here:

#menu {
margin:455px 0 410px 0;
float:right;
background: transparent;
width:140px;
background: url(side.jpg) top right no-repeat;
padding: 465px 0 0 0;
}

Try setting the top margin and padding to zero.

Also, you have several validation errors:
http://validator.w3.org/check?verbose=1&uri=http://www.synthetic-effulgence.com/glitch/home.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Strange float issue with Explorer 6

[Alisha]

Just to be sure...
really no one has any idea about what is causing this and how to fix it?

*Alisha*


Alisha wrote:

>I don't really know how tom explain this issue. but anyway... here's the 
>css and xhtml which are driving me crazy.
>
>http://www.synthetic-effulgence.com/glitch/home.html
>http://www.synthetic-effulgence.com/glitch/style.css
>
>In a container div (medium) there are two divs (main and menu)
>I need menu to be on the right, and I made it floated and not absolute 
>positiong cause in this way, the thirs div inside #medium can clear it, 
>since it's supposed to be the longest one, and with the clearer div also 
>the #medium div will be just as long.
>
>Now there is the glitch.
>
>On the #main div there's an h3, which I wanted to have a bg picture to 
>fill the whole width as to cover for the top part the background of the 
>container div #medium, even if the #menu is floated, I supposed that 
>setting no background for it at all it would have stayed transparent, 
>showing me both the #medium bg and what's on the bg of the #main h3.
>well it does work fine on firefox, but in explorer 6 seems like even the 
>#menu floated has a top margin which should allow the h3 to show its 
>entire width that it blocks it anyway at the point where it starts, even 
>in the top part which should be empty from the menu cause of the margin-top.
>if i try to set the width of the h3 to the whole width of #medium then 
>the whole #main, with the h3 as the first element, when pushed down the 
>page till the end of #menu.
>
>anyway, better explained by the page itself.
>
>http://www.synthetic-effulgence.com/glitch/home.html
>http://www.synthetic-effulgence.com/glitch/style.css
>
>Anyone please can expliain me why is this happening and why so different 
>from firefox to explorer, and how can i get the same effect on both browser?
>
>thanks a lot
>
>*Alisha*
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] negative margin float problem

[Gunlaug Sørtun]

Al Sparber wrote:
> From: "Gunlaug Sørtun" <[EMAIL PROTECTED]>
>> Maybe unrelated to this particular case, but what makes 'negative 
>> margins' unstable in IE?

> It depends on who is writing the CSS. In teaching, it's usually 
> better to teach a child math by starting with positive numbers :-) If
>  you can achieve a good result with a pocketknife, then there is no 
> need for a machete :-)

I agree. I prefer a CSS sledgehammer and 6 inch 'Layout' nails myself,
just to make sure IE get the message.

But seriously, negative margins may give strange effects in some cases
in IE. Like when pulling floats too far over the edge of elements with
'Layout' and such, where stable positioning and visibility may suffer.
Maybe it's better just to tell that, so others at least have an idea
when things start to look shaky in IE?

Then they can create their own tests and learn one or more of the many
methods that can be used to stabilize rendering in IE. Learning how to
control the parts that can be controlled in web design is probably a
good thing. There are plenty of less controllable factors that people
post questions about all the time.

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

Re: [css-d] making progress but... jumping CSS on nav bar buttons and weirdness between IE/FF

[David Laakso]

Laura Greenwood wrote:

>hi..
>
>my page http://tempinc.com/index8.htm
>
>
>  
>
Hi Laura,
Dunno, but kind of think all this might work out better for you with 
less code and a simple 3col layout. Others on the list may have a magic 
bullet. If not, and if what I suggests interests you, contact me off-list.

>
>Thanks for listening. I just keep on truckin here...
>
>  
>
My sentiments as well...

>Laura 
>  
>
Best,
~dL

-- 
David Laakso
http://www.dlaakso.com

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

[css-d] Negative margins and rounded corners

[Bill Moseley]

I've spent a bunch of hours reading about rounded corners, but I
think I'm not understating how negative margins effect parent
elements.

I have a two column layout -- left column floated navigation and right
column content.  The content section is to have top and left borders
and a rounded upper left corner.


I'm using the nested  trick:




[% some content %]




Where the first div "corner" is the corner, the second div is the
top line, and the third is the left side line.

#corner {
background: transparent url(div_curve.gif) no-repeat top left;
margin-left: 170px; /* move over from floated left column */
}

My rounded corner image is 28x28.  So, the top line needs to start
something like margin-left: 28px from (0,0) of the corner div.

#corner > div {
margin-left: 28px;
border-top: 1px solid #aaa;
}

Likewise, the left line needs to start down 28px, so margin-top: 28.
But, it also needs to move back to the left, so margin-left: -28.

#corner > div > div {
margin-left: -28px;  /* move back left */
margin-top: 27px;
border-left: 1px solid #aaa;
}

Ok, that works great so far.  I have my rounded corner.

But, the content div is now 28px down -- I'd like my content to start
higher up with the curve.  (Unfortunately, I don't have any single
line of text like a heading that I could place in my "corner" div.
All my content really needs to be in the content div.)

Anyway, I expected I could do this to move the content back in place:

div#content {
margin-top: -20px;  /* Finally, move text up into curve area */
padding-left: 10px; /* and clear the curve */
}

The problem is that makes the border-left line move up, too.  I don't
understand why that's doing that.  The margin-left: -28; above didn't
move the horizontal line back left.

I'm not very experienced with css2, so maybe I'm missing something
obvious.


Thanks,



-- 
Bill Moseley
[EMAIL PROTECTED]

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

Re: [css-d] negative margin float problem

[Al Sparber]

From: "Gunlaug Sørtun" <[EMAIL PROTECTED]>

> Al Sparber wrote:
>
>> Negative position properties are much more stable in IE. You'll 
>> need to fix your log, too. I would advise against using negative 
>> margins unless there is no other choice:
>
> Maybe unrelated to this particular case, but what makes 'negative
> margins' unstable in IE?

It depends on who is writing the CSS. In teaching, it's usually better 
to teach a child math by starting with positive numbers :-) If you can 
achieve a good result with a pocketknife, then there is no need for a 
machete :-)

Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".


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

Re: [css-d] negative margin float problem

[Gunlaug Sørtun]

Al Sparber wrote:

> Negative position properties are much more stable in IE. You'll need 
> to fix your log, too. I would advise against using negative margins 
> unless there is no other choice:

Maybe unrelated to this particular case, but what makes 'negative
margins' unstable in IE?

Both this page[1] and the test in it are perfectly stable in IE, and
it's all based on negative margins.

regards
Georg

[1]http://www.gunlaug.no/contents/wd_demo_float_03.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 3 column top margin

[Albert Padley]

I have been asked to move a heavily table based layout to a css based  
layout. I have been mostly successful in that the html and css  
validates. I am developing first for Firefox 1.5. Once I get it  
correct in Firefox, I'll worry about other browsers. I have two  
remaining problems and I appreciate some insight from the list.

HTML and CSS are located here:

http://karaokesource.com/template.php
http://karaokesource.com/karaoke.css

1. I need to have the 3 columns butt up against the magenta bar. I've  
been working on this for over a day and can't seem to get it right.

2. The center column div has the golden background. The center column  
#content div has a white background with a 1 em margin on all sides.  
On the left and right sides, the golden color shows through. This is  
what I expect. However, I want the same  1 em golden color to show at  
the top and bottom of content. Pointers please.

Thanks.

Al Padley

BTW, the dns was changed 24 hours ago, so it is possible it may not  
have propagated for everyone. It is resolving for me, but apologies  
in advance if you can't get to the above files.

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

Re: [css-d] negative margin float problem

[Al Sparber]

- Original Message - 
From: "Andrew Mason" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>; 
Sent: Saturday, December 03, 2005 5:43 PM
Subject: Re: [css-d] negative margin float problem


> ha!  sorry.  Here is the correct url:
>
> http://www.smandrew.com/dutch/about.html
>
> thanks, i'll give that a try.

You'll need to do some tinkering to get your exact location, but this 
example sets the container to "relative" and the icon div to absolute. 
Negative position properties are much more stable in IE. You'll need 
to fix your log, too. I would advise against using negative margins 
unless there is no other choice:

The example:
http://www.projectseven.com/testing/customers/dutch/

Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".


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

Re: [css-d] full height columns (even if there's no content)

[Gunlaug Sørtun]

Erik Visser wrote:
> Erik Visser wrote:
> 
>> When pages become too long and you scroll down, then the lines that
>>  split upp the page in parts are no longer there.

> like here: http://beta.bartbleijerveld.nl/troubadour.shtml

In IE6 I got the lines but no visible content. Also, that browser locked
up on narrow and/or very small windows.

However, when adding this debugging-line:
* html body div div div {height: 0;}
...the content became visible and the browser no longer locked up, so
we're dealing with a severe case of "IE/win needs its 'hasLayout'[1]
triggers or it's busted".

There are so many nested divs on that page that I gave up on finding all
the elements that needed such a trigger. Generic use of 'hasLayout'
triggers - like my debugging-version - are pure poison, so you have to
pick them out one by one and only apply a 'height: 0' (or similar
trigger) to only the right ones for IE/win only.

This one made the main content visible...
* html #SOWrap {height: 0;}
...but didn't solve the lock-up problem.

The reason for lock-up (or freeze) is that IE/win can't calculate well
enough where all elements are and what space they need, without
dimensional references - and it may crash while trying.
Giving elements 'Layout' provides such references, but 'Layout' has so
many drawbacks that it should only be applied when absolutely necessary.

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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] negative margin float problem

[Andrew Mason]

ha!  sorry.  Here is the correct url:

http://www.smandrew.com/dutch/about.html

thanks, i'll give that a try.



On Dec 3, 2005, at 4:20 PM, Holly Bergevin wrote:

> From: Andrew Mason <[EMAIL PROTECTED]>
>
>> I'm trying to float a div of buttons that hangs half way outside of
>> the main centering div... you can see the effect here:
>
>> file:///Users/boxer/Sites/dutch/about.html
>
>> And in IE... you can only see half of the buttons!  I tried changing
>> the z-index, but it didn't seem to make a difference.
>
> Well, I'm having a little difficulty seeing the page, considering  
> the "URL" you gave resides on your computer...
>
> But, that being said, for the IE problem you'll probably need to  
> add {position: relative;} to the element that's being margined  
> outside of its box for IE to show it. Note that this may require  
> that {position: relative;} be applied to other elements as well,  
> but it's generally the best way to solve the problem.
>
> Help for the other problems will probably require us being able to  
> see the page.
>
> I hope that helps,
>
> ~holly
>
>
>

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

Re: [css-d] footerStickyAlt implementation problem

[Schalk]

Jonathan Carter wrote:
> I was attempting to implement the footer sticky alt method to force the 
> footer to the bottom of the page/viewport, and it works fine when the 
> content doesn't take up the whole page, but when the content does exceed 
> that height, the footer overlaps a little bit of the body content. I'm 
> pretty sure I'm doing something wrong here, any help would be appreciated.
>
>   
Jonathan

You need to ensure you give that your margin on the footer is the same 
height as the footer. Also give same padding to the bottom to ensure you 
allow enough space for the footer to drag itself back into view.

 From TheManInBlue 
(http://www.themaninblue.com/writing/perspective/2005/08/29/)

#footer
{
position: relative;
margin-top: -7.5em;
}

HTH

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers


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

Re: [css-d] negative margin float problem

[Al Sparber]

From: "Holly Bergevin" <[EMAIL PROTECTED]>
> From: Andrew Mason <[EMAIL PROTECTED]>
>
>>I'm trying to float a div of buttons that hangs half way outside of
>>the main centering div... you can see the effect here:
>
>>file:///Users/boxer/Sites/dutch/about.html
>
>>And in IE... you can only see half of the buttons!  I tried changing
>>the z-index, but it didn't seem to make a difference.
>
> Well, I'm having a little difficulty seeing the page, considering 
> the "URL" you gave resides on your computer...
>
> But, that being said, for the IE problem you'll probably need to add 
> {position: relative;} to the element that's being margined outside 
> of its box for IE to show it. Note that this may require that 
> {position: relative;} be applied to other elements as well, but it's 
> generally the best way to solve the problem.

Of course, the page would really need to be seen, as you said - but 
using position:relative to fix a negative margin issue in IE overlooks 
the issue of whether it is advisable to use negative margins in the 
first place. Stuff can get lost offscreen in more ways than one ;-)

Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".


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

[css-d] footerStickyAlt implementation problem

[Jonathan Carter]

I was attempting to implement the footer sticky alt method to force the 
footer to the bottom of the page/viewport, and it works fine when the 
content doesn't take up the whole page, but when the content does exceed 
that height, the footer overlaps a little bit of the body content. I'm 
pretty sure I'm doing something wrong here, any help would be appreciated.

The test page I was trying it out can be found here: 
http://www.epiphanize.com/Test.htm

-

Jonathan Carter

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

Re: [css-d] negative margin float problem

[Holly Bergevin]

From: Andrew Mason <[EMAIL PROTECTED]>

>I'm trying to float a div of buttons that hangs half way outside of  
>the main centering div... you can see the effect here:

>file:///Users/boxer/Sites/dutch/about.html

>And in IE... you can only see half of the buttons!  I tried changing  
>the z-index, but it didn't seem to make a difference.

Well, I'm having a little difficulty seeing the page, considering the "URL" you 
gave resides on your computer...

But, that being said, for the IE problem you'll probably need to add {position: 
relative;} to the element that's being margined outside of its box for IE to 
show it. Note that this may require that {position: relative;} be applied to 
other elements as well, but it's generally the best way to solve the problem.

Help for the other problems will probably require us being able to see the page.

I hope that helps,

~holly 
 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Firefox active link dotted border problem

[Christian Montoya]

> >>> Ingo Chao wrote:
> >>>
>  http://temp.rdpdesign.com/final/ is still showing a jump in
>  active tabs.
> > http://www.satzansatz.de/cssd/tmp/cmoutline.png
> >
> > split paper clip. Gap. All the tabs were jumping initially. looks
> > awful.
> >
> > Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8)
> > Gecko/2005 Firefox/1.5
>

The first thing I thought was, I already fixed that problem! Then I
got a 403 error from satzansatz so I couldn't see the picture. I
tested it on my own FF 1.5 and I thought, WHAT HAPPENED, IT'S BACK?!?

A lesson to all, don't do this:
- Fix your CSS error in a computer lab and FTP the new file to your server.
- Modify the CSS on your home computer without downloading the new
file and upload that file over the fixed one.

On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Moving 'padding-top: 10px' from '#navcontainer' to '#wrapper' seems to
> cure all jumping and "split paper clip" while keeping a cross-browser
> identical appearance.
> Then delete padding on a:focus,a:active as it is no longer needed.

Thanks, that works!

> The reason for the "split paper clip" is some new(?) bug in Firefox
> related to 'overflow: hidden', as it adds 'padding: 10px' to 'height:
> 1.4em' when calculating actual 'height', but "forget" where that bottom
> is when positioning the background. Further investigation needed... :-)

Definitely. Though a simpler test case will need to be done, as my
case is a mess.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] full height columns (even if there's no content)

[Erik Visser]

Erik Visser wrote:
> When pages become too long and you scroll down, then the lines that
> split upp the page in parts are no longer there.
> 

like here:
http://beta.bartbleijerveld.nl/troubadour.shtml


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

[css-d] Attributes of classes

[Vicki Stebbins]

Hi all,

I've got myself going in circles with this, I initially had the same div ID 
in these pages which could be multiple times. It got a validation error.

I realise now that it's a no no and have made these divs CLASSES. That 
works but now some of my classes on  for instance now 
don't work?

I think I've gone through every which way of writing it, to no avail...

The new pages with the new class attributes are here:
http://www.explorerexperience.com.au/testimonialsb.shtml
http://www.explorerexperience.com.au/outbackb.shtml

The CSS for these two new pages is here:
http://www.explorerexperience.com.au/styles/imagetripb.css

How I want the pages to look is here:
http://www.explorerexperience.com.au/outback.shtml
http://www.explorerexperience.com.au/testimonials.shtml

These pages are using the old style sheet and only have one div in each page...

Many thanks in advance.

Regards
8-)
Vicki

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

Re: [css-d] Quotation Marks

[David Laakso]

Stephen Kortz wrote:

>Hi all,
>
>When using quotation marks in my html markup to quote a word or a sentence,
>where the DOCTYPE is Strict, I received an error when validating in
>Dreamweaver. The error suggests that I use "quot" instead of  quotation
>marks. When I go to other sites of see how their markup looks I see that
>they have in fact used quotation marks instead of "quot."
>
>
>Could someone pleased try and explain to me what is the proper way to quote
>a word or sentence in my markup. Values validate fine, only when I quote a
>word or a sentence does this happen.
>
>Thanks, I really appreciate the help!
>
>Stephen
>
It is a can of worms.
The typewriter punctuation "stuff" or 'stuff' is sometimes done 
/typographically/  “stuff ” or  ‘stuff’
Some say it is better to use typewriter punctuation since some people 
require so-called screen readers (text browsers).
Typographic punctuation is usually easier to read for those who are sighted.
I doubt this problem will be resolved in my lifetime.
Regards,
~dL

-- 
David Laakso
http://www.dlaakso.com

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

[css-d] addendum Calendar styling and site check

[David Laakso]

David Laakso wrote:

> Richard Brown wrote:
>
>> . The css is at:  
>> 
>> Firstly, I cannot see what is going wrong with the css styling on 
>> the  calendar. Has anyone got any ideas please?
>>
>
> I guess you could adjust the font-size. #wp-calendar { font-size: 
> whatever px; }However, to make it fit and zoom without breaking the 
> layout also means making it practically unusable.Personally, I'd dump 
> the calendar.I find my machine clock/calendar work just fine.
>
>> Also when I look at the site the middle content doesn't seem to be  
>> fluid and in IE the content seems at times to disappear under the 
>> right  side column. Does anybody else see this please and if so is 
>> there a fix  please?
>>  
>>
> I didn't see the fluid problem or the drop.But I only looked a couple 
> of pages(and I am not real bright).
> I was sort of curious, though, about how I would get back to the home 
> page other than breaking the back button?
> This is a screen shot at text-size largest in IE 'accessibility' mode. 
> You may need to make a few little adjustments(in addition to the 
> calendar business).
> It might be a good idea to get the page to work at 200% zoom in ff. 
> Not that anyone is necessarily going to go that high-- but, rather, 
> just to see that everything is behaving properly.
>
>> Is there a better three column design to use please?
>>  
>>
> I'm not sure what you mean by better?  I happen to like the 2 & 3 col 
> layouts on this page, fwiw: 
> 
>
> Oh, btw, my granddaughter thinks it would be cool if you changed 
> 90%/1.1 to 100.01%/1.2 in the body declaration(she is a lot brighter 
> than me).
>
>> Thanks
>>
>> Rich
>>
>>  
>>
> Best,
> ~dL
>
Forgot the screen shot address, sorry:

-- 
David Laakso
http://www.dlaakso.com

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

Re: [css-d] Firefox active link dotted border problem

[Gunlaug Sørtun]

Ingo Chao wrote:
> Christian Montoya wrote:
> 
>> On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>> 
>>> Ingo Chao wrote:
>>> 
 http://temp.rdpdesign.com/final/ is still showing a jump in 
 active tabs.

...

> http://www.satzansatz.de/cssd/tmp/cmoutline.png
> 
> split paper clip. Gap. All the tabs were jumping initially. looks 
> awful.
> 
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) 
> Gecko/2005 Firefox/1.5

Moving 'padding-top: 10px' from '#navcontainer' to '#wrapper' seems to
cure all jumping and "split paper clip" while keeping a cross-browser
identical appearance.
Then delete padding on a:focus,a:active as it is no longer needed.

The reason for the "split paper clip" is some new(?) bug in Firefox
related to 'overflow: hidden', as it adds 'padding: 10px' to 'height:
1.4em' when calculating actual 'height', but "forget" where that bottom
is when positioning the background. Further investigation needed... :-)

The rest should be adjustable to your liking, as long as you avoid
complicated calculations of dimensions on the element with 'overflow:
hidden' on it.

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

Re: [css-d] Calendar styling and site check

[David Laakso]

Richard Brown wrote:

>. The css is at:  
>style.css>
>Firstly, I cannot see what is going wrong with the css styling on the  
>calendar. Has anyone got any ideas please?
>

I guess you could adjust the font-size. #wp-calendar { font-size: whatever px; 
}However, to make it fit and zoom without breaking the layout also means making 
it practically unusable.Personally, I'd dump the calendar.I find my machine 
clock/calendar work just fine.

>Also when I look at the site the middle content doesn't seem to be  
>fluid and in IE the content seems at times to disappear under the right  
>side column. Does anybody else see this please and if so is there a fix  
>please?
>  
>
I didn't see the fluid problem or the drop.But I only looked a couple of 
pages(and I am not real bright).
I was sort of curious, though, about how I would get back to the home 
page other than breaking the back button?
This is a screen shot at text-size largest in IE 'accessibility' mode. 
You may need to make a few little adjustments(in addition to the 
calendar business).
It might be a good idea to get the page to work at 200% zoom in ff. Not 
that anyone is necessarily going to go that high-- but, rather, just to 
see that everything is behaving properly.

>Is there a better three column design to use please?
>  
>
I'm not sure what you mean by better?  I happen to like the 2 & 3 col 
layouts on this page, fwiw: 


Oh, btw, my granddaughter thinks it would be cool if you changed 90%/1.1 
to 100.01%/1.2 in the body declaration(she is a lot brighter than me).

>Thanks
>
>Rich
>
>  
>
Best,
~dL

-- 
David Laakso
http://www.dlaakso.com

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

Re: [css-d] Calendar styling and site check

[Richard Brown]

Hi All

On 3 Dec 2005, at 14:08, Schalk wrote:

>> Please could you take a look at this site:
>> . The css is at:   
>> > style.css>. I have used the design from here:   
>> 
>>
>> Firstly, I cannot see what is going wrong with the css styling on the  
>>  calendar. Has anyone got any ideas please?
>>
>> Also when I look at the site the middle content doesn't seem to be   
>> fluid and in IE the content seems at times to disappear under the  
>> right  side column. Does anybody else see this please and if so is  
>> there a fix  please?
> Greetings Richard
>
> First have a look at what is generated by the W3C validator:
> http://validator.w3.org/check?verbose=1&uri=http%3A// 
> www.lostwithiel.org.uk/
>
> Fix up these errors and let us know if that helped with any of the  
> problems you are experiencing.
>
Firstly thanks Schalk and apologies to the list for not doing it first.

In IE what I am seeing is the centre content not collapsing and edging  
into the right column. The four images end up stuck under the lower  
content box and the title, "Lostwithiel" doesn't collapses at all  
ending up stuck totally over the right column.

The calendar seems to be missing a line down the right hand side!

Any help would be much appreciated.

Thanks

Rich
http://www.cregy.co.uk
So here's what I want you to do, God helping you: Take your everyday,  
ordinary life--your sleeping, eating, going-to-work, and walking-around  
life--and place it before God as an offering. Embracing what God does  
for you is the best thing you can do for him. Romans 12 v 1

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

Re: [css-d] Quotation Marks

[Ann Adamcik]

> When using quotation marks in my html markup to
> quote a word or a sentence,
> where the DOCTYPE is Strict, I received an error
> when validating in
> Dreamweaver. The error suggests that I use "quot"
> instead of  quotation
> marks. 

Not a css issue, but I think you're looking for quote
entities.

E.g. for double quotes:  “Quoted text”
Straight quotes are " single quotes are ‘
and ’

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

Re: [css-d] Quotation Marks

[Steven Olson]

> ... what is the proper way to quote
> a word or sentence in my markup.

“ for open quote,
” for close quote.

Should work no matter what character set is being used.  In many fonts, they
will look the same, but not in all.

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

Re: [css-d] Firefox active link dotted border problem

[Ingo Chao]

Christian Montoya wrote:
> On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>> Ingo Chao wrote:
>>> http://temp.rdpdesign.com/final/ is still showing a jump in active
>>> tabs. I wonder was the question was, really.
>> I wonder too. Now the active link is jumping in all browsers, and the
>> active tab is jumping twice as high in Firefox.
>> Nice effect btw, so maybe it is intentional.
> 
> Right, it's not intentional but I would rather keep the jumping than
> remove the outline border in FF. As long as it's just the active tab
> that jumps it's less likely to induce motion sickness.


http://www.satzansatz.de/cssd/tmp/cmoutline.png

split paper clip. Gap. All the tabs were jumping initially. looks awful.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/2005 
Firefox/1.5


-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] full height columns (even if there's no content)

[Schalk]

Erik Visser wrote:
> Hello,
>
> On the following site I try to make some analogy with a book.
> So the idea is a 2 column (taking up each 50% of the width) lay-out.
> And a footer fixed to the bottom of the viewport.
>
> The 2 columns are visible by 3 (left, middle, right) vertical lines
> (borders). See:
>
> http://beta.bartbleijerveld.nl
> http://beta.bartbleijerveld.nl/css/skidoo_too.css
>
>   
Erik

Have a look here: 
http://www.themaninblue.com/writing/perspective/2005/08/29/

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers


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

[css-d] full height columns (even if there's no content)

[Erik Visser]

Hello,

On the following site I try to make some analogy with a book.
So the idea is a 2 column (taking up each 50% of the width) lay-out.
And a footer fixed to the bottom of the viewport.

The 2 columns are visible by 3 (left, middle, right) vertical lines
(borders). See:

http://beta.bartbleijerveld.nl
http://beta.bartbleijerveld.nl/css/skidoo_too.css

Now the thing is these borders should always be visible from the top of
the page all the way down to the footer.
So the columns should stretch down to the footer regardless of the
amount of content that's i the columns. But thats not the case now.

Please some help with getting full height columns.

Thanks, Erik

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

[css-d] Quotation Marks

[Stephen Kortz]

Hi all,

When using quotation marks in my html markup to quote a word or a sentence,
where the DOCTYPE is Strict, I received an error when validating in
Dreamweaver. The error suggests that I use "quot" instead of  quotation
marks. When I go to other sites of see how their markup looks I see that
they have in fact used quotation marks instead of "quot."


Could someone pleased try and explain to me what is the proper way to quote
a word or sentence in my markup. Values validate fine, only when I quote a
word or a sentence does this happen.

Thanks, I really appreciate the help!

Stephen


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

Re: [css-d] Firefox active link dotted border problem

[Christian Montoya]

On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Ingo Chao wrote:
> > http://temp.rdpdesign.com/final/ is still showing a jump in active
> > tabs. I wonder was the question was, really.
>
> I wonder too. Now the active link is jumping in all browsers, and the
> active tab is jumping twice as high in Firefox.
> Nice effect btw, so maybe it is intentional.

Right, it's not intentional but I would rather keep the jumping than
remove the outline border in FF. As long as it's just the active tab
that jumps it's less likely to induce motion sickness.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ADMIN: Dynodes: Cross-Domain Scripting using Dynamic Node Creation

[Eric A. Meyer]

At 11:08 PM -0800 12/2/05, Kent Brewster wrote:

>  http://www.mindsack.com/uxe/dynodes/
>
>  I would especially appreciate feedback from Safari 1.1 and 1.2 
>users. I know dynodes work on 1.3, but not 1.0.x, so pinpointing 
>exactly where on the Safari continuum they drop out would be very 
>useful.

If you're asking for feedback regarding CSS problems in Safari (or 
any other browser), or need help with CSS, then this post would be 
considered on-topic.  If not, then it's really a post about scripting 
techniques and is thus off-topic, and I have to ask that anyone who 
wants to respond to Kent along those lines do so off-list.  Thank you.

-- 
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] negative margin float problem

[Andrew Mason]

Hi,

I'm trying to float a div of buttons that hangs half way outside of  
the main centering div... you can see the effect here:

file:///Users/boxer/Sites/dutch/about.html

In Safari, it works great.  In Firefox, the buttons are too low and  
the logo comes off the left side.

And in IE... you can only see half of the buttons!  I tried changing  
the z-index, but it didn't seem to make a difference.

I'm guessing my layout technique needs some work...  Any help would  
be greatly appreciated!

Thanks,

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

[css-d] IE 6.0 text indent issue -Newbie

[Mindy]

Hi

I have an issue with IE 6 in this navigation, it's causing the first line of
text to indent and I can't sort out how to solve it. I know that if I set
"text-indent" in the style sheet to "-23px" the problem is resolved in IE 6,
but it causes the text to be up against the left side of the page in
Firefox, mozilla etc (that is there is no margin). So my question is, how do
I serve instructions to IE to indent the text and not to Firefox etc.?

http://www.testing.blueaardvark.com/YMA/index.html

styles:
http://www.testing.blueaardvark.com/YMA/styles_b.css

Thanks for your help.

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

Re: [css-d] Calendar styling and site check

[Schalk]

Richard Brown wrote:
> Hi All
>
> Please could you take a look at this site:
> . The css is at:  
>  style.css>. I have used the design from here:  
> 
>
> Firstly, I cannot see what is going wrong with the css styling on the  
> calendar. Has anyone got any ideas please?
>
> Also when I look at the site the middle content doesn't seem to be  
> fluid and in IE the content seems at times to disappear under the right  
> side column. Does anybody else see this please and if so is there a fix  
> please?
Greetings Richard

First have a look at what is generated by the W3C validator:
http://validator.w3.org/check?verbose=1&uri=http%3A//www.lostwithiel.org.uk/

Fix up these errors and let us know if that helped with any of the 
problems you are experiencing.

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers


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

[css-d] Calendar styling and site check

[Richard Brown]

Hi All

Please could you take a look at this site:
. The css is at:  
. I have used the design from here:  


Firstly, I cannot see what is going wrong with the css styling on the  
calendar. Has anyone got any ideas please?

Also when I look at the site the middle content doesn't seem to be  
fluid and in IE the content seems at times to disappear under the right  
side column. Does anybody else see this please and if so is there a fix  
please?

Is there a better three column design to use please?

Thanks

Rich
http://www.cregy.co.uk
So here's what I want you to do, God helping you: Take your everyday,  
ordinary life--your sleeping, eating, going-to-work, and walking-around  
life--and place it before God as an offering. Embracing what God does  
for you is the best thing you can do for him. Romans 12 v 1

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

Re: [css-d] Firefox active link dotted border problem

[Gunlaug Sørtun]

Ingo Chao wrote:
> http://temp.rdpdesign.com/final/ is still showing a jump in active 
> tabs. I wonder was the question was, really.

I wonder too. Now the active link is jumping in all browsers, and the
active tab is jumping twice as high in Firefox.
Nice effect btw, so maybe it is intentional.

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