Re: [css-d] page not working in IE 7 or Vista

[Peter Mount]

I suggest you go to this web site:

http://www.w3schools.com/

Start with a Strict doctype (I prefer xhtml). Learn xhtml. Learn CSS. Use 
external files for CSS and JavaScript. Don't use font tags. 

I think the above will be helpful to you.

Peter Mount
Web Development for Business
[EMAIL PROTECTED]
http://www.petermount.com

> Doreen Cowan <[EMAIL PROTECTED]> wrote:
> 
> first problem
> I have not been able to see my web page in vista or IE 7 although it 
> works fine in I.E. 6.  My present operating  system is windows 2000. 
> 
> The doctype which I used  was as follows.
>  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> 
> 
> This is a part of my coding.
> 
> 
> 
> I put the page through the validator.  There are a number of errors. 
> One of them is as follows:
> Line 28, character 50: 
> t" href="newindex.css" style type="text/css"  />
> Error: style is not a member of a group specified for any attribute
> 
> Could someone please tell me what this means.
> 
> second problem
> I changed the doctype to:
> 
> 
> and I think that it  is working in IE7 but maybe changing the doctype 
> was not the right thing to do.
> 
> I am fairly new at coding and would be very grateful for any help.
> 
> Doreen Cowan
> http://home.cogeco.ca/~doreencowan/
> __
> css-discuss [EMAIL PROTECTED]
> 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 [EMAIL PROTECTED]
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] page not working in IE 7 or Vista

[Rahul Gonsalves]

On 28-Dec-07, at 7:43 AM, Doreen Cowan wrote:

> This is a part of my coding.
> 

Remove the 'style', so that it reads:



> I changed the doctype to:
> 
>
> and I think that it  is working in IE7 but maybe changing the  
> doctype was not the right thing to do.

What is working in IE7? Using a Strict or an xHTML doctype should not  
give you a problem in IE7. I believe that it is good practice to use a  
Strict doctype as far as possible -- as this will alert you if you use  
deprecated HTML tags, etc.

Best,
  - Rahul.
__
css-discuss [EMAIL PROTECTED]
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] page not working in IE 7 or Vista

[Doreen Cowan]

first problem
I have not been able to see my web page in vista or IE 7 although it works fine 
in I.E. 6.  My present operating  system is windows 2000. 

The doctype which I used  was as follows.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>


This is a part of my coding.



I put the page through the validator.  There are a number of errors. 
One of them is as follows:
Line 28, character 50: 
t" href="newindex.css" style type="text/css"  />
Error: style is not a member of a group specified for any attribute

Could someone please tell me what this means.

second problem
I changed the doctype to:


and I think that it  is working in IE7 but maybe changing the doctype was not 
the right thing to do.

I am fairly new at coding and would be very grateful for any help.

Doreen Cowan
http://home.cogeco.ca/~doreencowan/
__
css-discuss [EMAIL PROTECTED]
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] Div's not aligning right in IE7 [SOLVED]

[Dave M G]

Moxy (Tim?),

Thank you for responding.

> I saw that Dave was struggling with his footer layout so I gave him my 
> approach to layout design (without addressing his specific CSS)

I appreciate you taking the time to give me your advice. It was helpful 
in getting me to rethink my approach.

I've tidied up the footer area a little by removing some padding and 
margin specifications, and instead applying "left" and "right" 
properties to the text. This seems to work in IE7 and FireFox equally well.

I believe I now have a working design, which I'll now attempt to tweak 
for efficiency.

Many thanks to the list for it's ever present support.

-- 
Dave M G
Articlass - open source CMS
http://articlass.org
__
css-discuss [EMAIL PROTECTED]
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] Table borders not working properly

[Philippe Wittenbergh]

On Dec 28, 2007, at 7:20 AM, Steve LaBadie wrote:

> I created a calendar with tables and all I want to do is control  
> the borders for the table. When I apply CSS all of the tables on  
> the page are being effected. I first surrounded the table with a  
>  tag and then added a class attribute to the table, neither  
> worked. Any suggestions would be appreciated.
>
> 
> #calendar #table, td, th {
> border-color: #600;
> border-style: solid;
> }
> #calendar #table {
> border-width: 0 0 1px 1px;
> border-spacing: 0;
> border-collapse: collapse;
> }
> #calendar td, th {
> margin: 0;
> padding: 4px;
> border-width: 1px 1px 0 0;
> background-color: #FFC;
> }
> 

A live url with a sample of your code would be really useful to help  
with debuging.
Meanwhile, a possible wild guess:
Is the '#' in front of 'table' in your code snipped above a typo ?
(iow, does your table have an ID of 'table').

Also, a selector like '#calendar td, th' means
'select a td that is a descendant of an element with ID '#calendar'  
and select all 'th' on the page'.
You probably want something like this:
#calendar td, #calendar th {}

selectOracle is a nice tool that translates the meaning of selectors


Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
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] IE6 - Sperling Vertical Menu

[Jehangir Larry]

David Laakso wrote:
> Jehangir Larry wrote:
>   
>> Pls see www.nayanindore.com
>> The menu works first time in IE6 (XP) and then freezes!
>> Grateful for suggestions to make it work.
>> Thanks.
>>
>>   
>> 
>
>
> There is a reason why some of us try to avoid menus such as those.
>
> Isolate the menu (pull the menu from the page, and put it  on another 
> page all by itself).
>
> 1/ If you have the same problem with it isolated, go back to Sperling's 
> original and start from scratch.
> 2/ If, when isolated, there is no problem, then there may be a js script 
> (or css) conflict between the menu and the page it is in.
>
> Best,
> ~dL
>
> PS If all else fails, keep it simple: 
> 
>
>   
Shall revert soon. Appreciate suggestion. Thanks.

-- 
Best,
JL


Jehangir Larry

__
css-discuss [EMAIL PROTECTED]
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] absolutely positioning an into a IE6 & 7

[Bruno Fassino]

Giuseppe Craparotta wrote:
>
> http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html
>
> To properly display the "works" links at the bottom-right of
> the  on IE6 you need to add /width:100%/ to the  itself .
> Of course I've also added /position:relative/ to the  to activate
> /position:absolute + top: x /and /left: y/ values given to the  .
> As a consequence of the presence of the width property, the  get
> separed when the page size is increased (ctrl + mouse wheel).


Try adding position:relative to body. If the problem is caused by the IE7
'page zoom' and relative positioned elements [1], this should fix it.


> If you get rid of the absolute positioning method and position the
> "works" links simply by setting top and left margins then the "want to
> tell you something more" link gets covered (z-indexing doesn't do any
> good). This is what you get in IE6 and IE7:
>
> http://www.giuseppecraparottacv.co.uk/work-web-test-works.html


In this case it seems that giving 'hasLayout' [2] to the  fixes the
problem. I tried with
li { zoom: 1 }
(not used width:100% here since the li have horizontal padding.)


Hope this helps a little,
Bruno

[1] http://brunildo.org/test/ie7_relzoom2.html
[2] http://www.satzansatz.de/cssd/onhavinglayout.html

--
Bruno Fassino http://www.brunildo.org/test

__
css-discuss [EMAIL PROTECTED]
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] Fwd: Re: Table borders not working properly

[Peter Mount]

> Peter Mount <[EMAIL PROTECTED]> wrote:
> 
> > Steve LaBadie <[EMAIL PROTECTED]> wrote:
> > 
> > I created a calendar with tables and all I want to do is control the 
> > borders for the table. When I apply CSS all of the tables on the page 
> > are being effected. I first surrounded the table with a  tag and 
> > then added a class attribute to the table, neither worked. Any 
> > suggestions would be appreciated.
> >  
> > 
> > #calendar #table, td, th {
> > border-color: #600;
> > border-style: solid;
> > }
> > #calendar #table {
> > border-width: 0 0 1px 1px;
> > border-spacing: 0;
> > border-collapse: collapse;
> > }
> > #calendar td, th {
> > margin: 0;
> > padding: 4px;
> > border-width: 1px 1px 0 0;
> > background-color: #FFC;
> > }
> > 
> >  
> > Thanks
> > __
> > css-discuss [EMAIL PROTECTED]
> > 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/
> 
> Hi
> 
> Try this:
> 
> 
> 
> 
> 
> #calendar table, #calendar td, #calendar th {
> border-color: #600;
> border-style: solid;
> }
> #calendar #table {
> border-width: 0 0 1px 1px;
> border-spacing: 0;
> border-collapse: collapse;
> }
> #calendar td, #calendar th {
> margin: 0;
> padding: 4px;
> border-width: 1px 1px 0 0;
> background-color: #FFC;
> }
> 
> 
> 
> 
> 
> 
> 
> 
> head 1head 2
> 
> 
> Cell 1Cell2
> 
> 
> 
> 
> 
> 
> 
> head 1head 2
> 
> 
> Cell 1Cell2
> 
> 
> 
> 
> 
> 
> Peter Mount
> Web Development for Business
> [EMAIL PROTECTED]
> http://www.petermount.com
__
css-discuss [EMAIL PROTECTED]
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] IE7 wraping URLs at the "?" part...

[Anthony Ettinger]

On Dec 27, 2007 1:40 PM, Anthony Ettinger <[EMAIL PROTECTED]> wrote:

> I also tried { white-space: nowrap; } on the td CSS rule, but that
> didn't do it either...again this is only IE7.

Adding it to both rules worked :)


-- 
Anthony Ettinger
408-656-2473
http://anthony.ettinger.name

@pets = Pets.find_all_by_species('dog')
@pets.each do |dog| {
if dog.name == 'Farley'
dog.nick = 'Sir Barks-A-lot'
elsif dog.name == 'Bonita'
dog.nick = 'Princess Boo'
else
dog.nick = 'Doggie?'
end
}
__
css-discuss [EMAIL PROTECTED]
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] Table borders not working properly

[Steve LaBadie]

I created a calendar with tables and all I want to do is control the borders 
for the table. When I apply CSS all of the tables on the page are being 
effected. I first surrounded the table with a  tag and then added a class 
attribute to the table, neither worked. Any suggestions would be appreciated.
 

#calendar #table, td, th {
border-color: #600;
border-style: solid;
}
#calendar #table {
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
#calendar td, th {
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
background-color: #FFC;
}

 
Thanks
__
css-discuss [EMAIL PROTECTED]
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] IE7 wraping URLs at the "?" part...

[Anthony Ettinger]

It works everywhere else (FF, Opera, Safari), but IE7 seems to not
like the "?" in a url, and wraps it within a table cell.

Markup is a cell in a table like this:

foo.com?long_url=here

CSS is:

td.pan { overflow: hidden; width: 12em; }
td.pan > *:first-child { display: block; overflow: hidden; width: 12em; }

So when the URL is extremely long, it wraps at the "?" in the
query_string. I tried replacing with something else "x" and it no
longer wraps. So I tried entity encoding the question mark as "<"
but it still wrapped instead of hiding the portion of the URL past
12ems.

I also tried { white-space: nowrap; } on the td CSS rule, but that
didn't do it either...again this is only IE7.

-- 
Anthony Ettinger
408-656-2473
http://anthony.ettinger.name

@pets = Pets.find_all_by_species('dog')
@pets.each do |dog| {
if dog.name == 'Farley'
dog.nick = 'Sir Barks-A-lot'
elsif dog.name == 'Bonita'
dog.nick = 'Princess Boo'
else
dog.nick = 'Doggie?'
end
}
__
css-discuss [EMAIL PROTECTED]
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] Div's not aligning right in IE7

[Gunlaug Sørtun]

Big Moxy wrote:
> I saw that Dave was struggling with his footer layout so I gave him 
> my approach to layout design (without addressing his specific CSS). 
> Again this is my opinion and I was sharing what works for me.

Fair enough.

That we have different opinions is most often a good thing, as it brings
some variation into the "game". However, what you did was addressing
_your_ case, not Dave's, since you did not address his _very_ specific CSS.

I actually thought the approach you presented became obsolete and
disappeared from serious web design many years ago, but obviously I was
wrong. It definitely isn't a high-ranking alternative.

Fixing the case at hand one bit at a time until it works - if at all
possible, makes a lot more sense, IMO...

...(IE6 isn't supposed to be supported).

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 - Sperling Vertical Menu

[David Laakso]

Jehangir Larry wrote:
> Pls see www.nayanindore.com
> The menu works first time in IE6 (XP) and then freezes!
> Grateful for suggestions to make it work.
> Thanks.
>
>   


There is a reason why some of us try to avoid menus such as those.

Isolate the menu (pull the menu from the page, and put it  on another 
page all by itself).

1/ If you have the same problem with it isolated, go back to Sperling's 
original and start from scratch.
2/ If, when isolated, there is no problem, then there may be a js script 
(or css) conflict between the menu and the page it is in.

Best,
~dL

PS If all else fails, keep it simple: 


-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] absolutely positioning an into a IE6 & 7

[Giuseppe Craparotta]

Is there something wrong in absolutely positioning within a  an  
tag displayed as a block?
Of course problems arise on Internet Exploder (I'm quoting Georg :-)  ), 
both 7 and 6.
If you try it this is the crap result on the browsers just mentioned:

http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html

Please follow:
To properly display the "works" links at the bottom-right of the  on 
IE6 you need to add /width:100%/ to the  itself .
Of course I've also added /position:relative/ to the  to activate 
/position:absolute + top: x /and /left: y/ values given to the  .
As a consequence of the presence of the width property, the  get 
separed when the page size is increased (ctrl + mouse wheel).
This is unfair!

If you get rid of the absolute positioning method and position the 
"works" links simply by setting top and left margins then the "want to 
tell you something more" link gets covered (z-indexing doesn't do any 
good). This is what you get in IE6 and IE7:

http://www.giuseppecraparottacv.co.uk/work-web-test-works.html

Please note that both files contain CSS code.

What shall I do? Try to position through float? I'm gonna try that... 
But could you please enlighten me on the above issue, I think I make no 
relevant mistake, that should work!!!

Thanks a lot,
G
//
__
css-discuss [EMAIL PROTECTED]
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] CSS Resources

[Gabriele Romanato]

http://www.css-zibaldone.com/risorse/

skip the italian writings. there are about 2957 useful links on 'bookmarks'.
bye :)

ernie

-- 
http://www.css-zibaldone.com/
http://mimicry.css-zibaldone.com/
__
css-discuss [EMAIL PROTECTED]
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] IE6 - Sperling Vertical Menu

[Jehangir Larry]

Pls see www.nayanindore.com
The menu works first time in IE6 (XP) and then freezes!
Grateful for suggestions to make it work.
Thanks.

-- 
Best,
JL


Jehangir Larry

__
css-discuss [EMAIL PROTECTED]
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] Div's not aligning right in IE7

[Big Moxy]

I don't double div everything just the sections (e.g. content, menu, 
footer). I still sub-divide those divs. For example:










I saw that Dave was struggling with his footer layout so I gave him my 
approach to layout design (without addressing his specific CSS). Again 
this is my opinion and I was sharing what works for me.

- Tim

Gunlaug Sørtun wrote:
> Big Moxy wrote:
>
>> You're exactly right. This approach does require extra divs but 
>> according to the advice I frequently get from experts-exchange.com 
>> that is the best technique.
>
> Pardon my ignorance, but how can adding more divitis to a case of
> already quite extensive divitis be characterized as "the best technique"?
> In Dave's page that footer already has around twice as many divs as is
> needed for any browser released since - and including - IE5/win. The
> whole thing is just very poorly styled.
>
> A few direct pointers to quotes and cases where that approach actually
> is an advantage, might be useful, as I can't find any signs of
> HTML and/or CSS "expertize" in what's behind the site you're referring
> to and I'm too lazy to dig any further.
>
> regards
> Georg
__
css-discuss [EMAIL PROTECTED]
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] Div's not aligning right in IE7

[Gunlaug Sørtun]

Big Moxy wrote:

> You're exactly right. This approach does require extra divs but 
> according to the advice I frequently get from experts-exchange.com 
> that is the best technique.

Pardon my ignorance, but how can adding more divitis to a case of
already quite extensive divitis be characterized as "the best technique"?
In Dave's page that footer already has around twice as many divs as is
needed for any browser released since - and including - IE5/win. The
whole thing is just very poorly styled.

A few direct pointers to quotes and cases where that approach actually
is an advantage, might be useful, as I can't find any signs of
HTML and/or CSS "expertize" in what's behind the site you're referring
to and I'm too lazy to dig any further.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div's not aligning right in IE7

[Big Moxy]

Dave,

You're exactly right. This approach does require extra divs but 
according to the advice I frequently get from experts-exchange.com that 
is the best technique.

Here's an example:

Me: "I had a top margin on the left menu to bring it down but the top 
part of the text is hidden under the top menu."

EE: "If you put a margin on the left menu div, the div and margin 
together gets higher than the page. Put another div inside it and set 
the margin on that."

Me: "I created a div called leftMenuPad that sits inside of leftMenu and 
all is well on IE. On FF, however it's an entirely different story. The 
entire page is pushed down by the top margin set in leftMenuPad. I tried 
adding a contentPad like leftMenuPad for the section in grey but I get 
the same results. Works on IE but not on FF.

On IE the left menu now extends the length of the browser however the 
content body in grey does not."

EE: "Add top: 0; to the top menu class."

The "boundary" div provides the general characteristics required (width, 
height, etc.) and the "padding" div allows you to get more specific. 
This technique, at least for me, overcomes many browser deficiencies 
(i.e. IE/win) and works with with compliant browsers.

If you contact me offline I'd be happy to send you one of my CSS files 
so you can see the big picture.

- Tim


Dave M G wrote:
> Moxy,
>
> Thank you for responding.
>
>> I was advised to use padding early in my CSS learning. The 
>> recommendation was to create a "boundary div" specifying margin:0 and 
>> padding:0 as shown in #leftMenu and then define internal margins, 
>> padding in a "padding div" as shown in #leftMenuPad below. That 
>> approach has served me well.
>
> I am trying to understand the principle behind what you are suggesting 
> so that I might apply it to my situation.
>
> However, I don't quite grasp it. It seems that you are just putting in 
> an extra div with padding inside another div without padding. How 
> exactly does this make a difference?
>
__
css-discuss [EMAIL PROTECTED]
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] Div's not aligning right in IE7

[Gunlaug Sørtun]

Dave M G wrote:
> Following on my own post, I saw on the web that there might be a bug 
> in IE7 that prevents margins from working properly. It was 
> recommended that one could use padding instead, depending on the 
> circumstances.

What you're seeing in your page is not a browser-bug, but a designer-bug.

You're floating elements inside a width-less absolute positioned
element, while gambling on that Firefox' rendering is correct.

There is no "correct" rendering for such an incomplete combination of
elements and styles that you have offered those poor browsers, so they
all come out with different solutions.

Note that IE/win doesn't default to "dead in the water" positioning
when a *position* is left out for an absolute positioned element. Other
browsers do - more or less successfully, but they are "just guessing" on
the rest.

>> You can see that the text in the bottom right, which is in a div 
>> called '.footer-text-right', and has a 'padding:0px 50px 0px 0px;',
>>  the margin seems to be having no effect.

Add...
#footer {
position: relative;
}

#footer-text {
left: 50px;
right: 50px;
}

...and delete...

.footer-text-right {
padding:0px 50px 0px 0px;
}

...and Firefox, Opera and IE7 will align the entire footer identical.

Even IE6 is close, although that version can't absolute position an
element's opposite sides and therefore gets the width wrong.


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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div's not aligning right in IE7

[Dave M G]

Moxy,

Thank you for responding.

> I was advised to use padding early in my CSS learning. The 
> recommendation was to create a "boundary div" specifying margin:0 and 
> padding:0 as shown in #leftMenu and then define internal margins, 
> padding in a "padding div" as shown in #leftMenuPad below. That approach 
> has served me well.

I am trying to understand the principle behind what you are suggesting 
so that I might apply it to my situation.

However, I don't quite grasp it. It seems that you are just putting in 
an extra div with padding inside another div without padding. How 
exactly does this make a difference?

-- 
Dave M G
Articlass - open source CMS
http://articlass.org
__
css-discuss [EMAIL PROTECTED]
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] CSS tooltip hidden by other elements

[Gunlaug Sørtun]

Giuseppe Craparotta wrote:
> if you open 
> http://www.giuseppecraparottacv.co.uk/work-web-tooltip.html with IE7
> or 6 and hover the first "let me tell you something more" link you
> realize immediately what's wrong. The CSS tooltip pops up below the
> boxes containing text. This of course doesn't happen in other
> browsers.

Of course not ... it is a genuine IE/win bug :-)
IE/win *can't* stack absolute positioned elements relative to anything
but other absolute positioned elements, and *can't* make absolute
positioned elements escape the stacking of the parent element.

If you add...

a.popup:hover {position: relative; z-index: 100;}
a.popup span {height: auto!important;}
li.odd, li.even {position: static;}
a.works {position: static; float: right; margin: -1.4em 10% 0 0;
display: inline;}

...after all other styles, you'll get the intended rendering in all
browsers. You can then change your original styles to reflect these
override styles.


BTW: If you also add...

html {font-size: 100%;}

...you'll also avoid the "em font-resizing bug in IE5 ‑ IE7"...


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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS tooltip hidden by other elements

[Bob Easton]

Giuseppe Craparotta wrote:
> Hi, this is irritating...
> if you open
> http://www.giuseppecraparottacv.co.uk/work-web-tooltip.html
> with IE7 or 6 and hover the first "let me tell you something more" link 
> you realize immediately what's wrong.
> The CSS tooltip pops up below the boxes containing text.
> ...

I can see what is happening, but don't know am easy way to resolve it 
with your current coding approach. I'll bet that Georg does.

The content of the popup (using a span, which is a non-structural inline 
element) is being constrained to the size of the parent container, the 
li.  You can see this if you remove position:relative from the li.

Perhaps using a block element, such as div, instead of span will give 
better results.

-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
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] CSS tooltip hidden by other elements

[Giuseppe Craparotta]

Hi, this is irritating...
if you open
http://www.giuseppecraparottacv.co.uk/work-web-tooltip.html
with IE7 or 6 and hover the first "let me tell you something more" link 
you realize immediately what's wrong.
The CSS tooltip pops up below the boxes containing text.
This of course doesn't happen in other browsers.
I thought z-indexing would have fixed the problem but it didn't.
Yesterday I resorted to "Lost", to heal my on-screen frustration 
watching people coping with "real nature" problems. Should go in the 
nature myself instead...
Thank you very much for your attention.

Here you have the css code (between lines the relevant properties):

body {
padding:0;
margin:0;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
background-color:#BFBFBF;
}
h1, p, strong, ul, li, .field, a, div {
padding:0;
margin:0;
}
a {
text-decoration:none;
}

ul {
min-width:574px;
width:39.8em;
margin:0 auto;
list-style-type:none;
border-right:4px solid #737272;
border-left:4px solid #737272;
}

.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}

h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
text-align:center;
line-height:1.55em;
width:558px;
height:1.80em;
background:#00abe4 url(img/bg-header.jpg) no-repeat bottom center;
}

li {
position:relative;
width:100%;
}
.odd {
background-color:#EAF4F5;
}
.even {
background-color:#ff;   
}

a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
background:url(img/bg-works.jpg) repeat-x;
position:absolute;
top:79%;
left:80%;
}

li p {
padding:1.1em 1em 0 1.5em;
width:37.3em;
}
*
--
.popup{
color:#00B9F6;
line-height:1.8em;
z-index:100;
}

.popup:hover {
color:#ff;
background-color:#5DCCF0;
z-index:100;
}

.popup span {
display:none;}

.popup:hover span {
display:block;
position:absolute;
z-index:100;
left:3em;
top:-1em;
width:200px;
height:200px;
color:#00;
line-height:1em;
padding:1.2em;
background-color:#5DCCF0;
}*
_

#browse {
margin:0 auto;
min-width:574px;
width:39.8em;
height:4.06em;
color:#6C6C6C;
background-color:#E1E1E1;
border-top:3px solid #737272;
border-right:4px solid #737272;
border-left:4px solid #737272;
border-bottom:4px solid #737272;
}

#browse p {
padding:0.65em 1em 0 1.5em;
}

ul.areas {
list-style:none;
border:none;
}

li.area {
width:6em;
/*height:26px;*/
height:1.83em;
float:left;
/*background:url(img/bg-areas-shad.jpg) no-repeat;*/
display:inline;
margin-top:0.39em;
}

li.area a {
display:block;
width:7.855em;
min-width:79px;
height:2.1em;
text-align:center;
/*min-width:79px;*/
color:#00;
font:bold 0.7em/2em verdana;
margin-top:0.5em;
margin-left:0.40em;
}

li.mktg {
margin-left:1.3em;
}

li.radio {
margin-left:9.6em;
margin-right:9.5em;
}

li.mktg a {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left top;
}
li.mktg a:hover {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left -8.3em;
}

li.radio a {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left top;
}
li.radio a:hover {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left -8.3em;
}

li.res a {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left top;
}
li.res a:hover {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left -8.3em;
}


__
css-discuss [EMAIL PROTECTED]
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/