Re: [css-d] should i use css3

2012-04-16 Thread Lorin Rivers
I almost always have to use a conditional stylesheet to get around one 
idiosyncracy or another in IE. They are getting shorter and shorter as my CSS 
skills improve.

overflow: hidden helps keep IE in step with everyone else, in my experience.

I recommend doing whatever you need to do suing CSS# but check the site 
periodically in IE and install the developer tools for IE so you can see what 
crazy tangent IE has looped off to.


On Apr 12, 2012, at 10:03 AM, michelle bowman wrote:

 Another possible strategy... would be to go ahead and use the CSS 3
 attributes you think will enhance your site. Then use conditional
 statements to include an IE Stylesheet, after your original stylesheet.
 
 Basically using this method, you'd add an additional stylesheet to fix any
 problems that might arise.  An example of what this would look like is
 below:
 
 !--[if IE 7]
  link href=css/ie7.css rel=stylesheet type=text/css media=screen
 ![endif]--
 
 A practical use for this could be using the text-shadow attribute. Maybe
 the text-shadow looks awesome in Firefox... but in IE 7 the text might be
 illegible when the shadow does not display. So you could use an IE
 stylesheet to change the color of the text to one that works without the
 shadow.
 
 Here's a link to a good article that explains IE conditional statements:
 http://www.quirksmode.org/css/condcom.html
 
 Also if you're interested in learning some more general knowledge about
 making your site work in various browsers,  here are a few links on
 graceful degradation  progressive enhancement.
 http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/
 http://www.alistapart.com/articles/understandingprogressiveenhancement/
 
 hope that's helpful!
 
 Michelle
 
 
 
 On Thu, Apr 12, 2012 at 2:59 AM, Ingo leo.ing...@gmx.de wrote:
 
 meera kibe schrieb am 11.04.2012 04:42
 
 
 keen to use it css3 for a website but i also want to cater to IE
 people.
 
 http://caniuse.com/
 
 
 Best, Ingo
 
 __**__**__
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- 
 http://css-discuss.incutio.**com/http://css-discuss.incutio.com/
 List policies -- 
 http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html
 Supported by evolt.org -- 
 http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/
 
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

-- 
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:lriv...@mosasaur.com
512/203.3198 (m)


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


Re: [css-d] position with div in stead of table

2012-04-16 Thread Lorin Rivers
This reminds me of a rant I have boiling.

Did the people who designed CSS ever, once, ask a designer what kind of stuff 
they would want to build for the web? Seriously, that doing this and aligning 
things in the center of other things are such common questions just annoys me 
tremendously. Why should/is this something that requires so much jiggery-pokery?

Whew. I feel better now.

On Apr 9, 2012, at 12:11 PM, Marie-Ange Demeulemeester wrote:

 Hi,
 I need a block with two columns.
 
 Despite of the quite simple code by using a table, I’ve tried to have the
 same result with DIV.
 
 The requirements are:
 
 · The columns have an equal height
 
 · Each column has a different background-color
 
 · 2 columns: first column always width 100px, second the rest of
 the screen (100% minus 100px)
 
 · The title and rule has to have the whole width of the second
 column, and not equal to the width of the text in that column. (Not OK in
 FF, in Chrome, )
 
 · This must be X-browser: IE6+, FF 3+; Chrome, Safari
 
 My tryout:
 
 http://users.telenet.be/MarieAnge/banner1.html
 
 If somebody can simplify the code, please don’t hesitate.
 
 
 
 Thanks.
 -- 
 Marie
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

-- 
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:lriv...@mosasaur.com
512/203.3198 (m)


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


[css-d] IE6 ordered list woes

2008-02-11 Thread Lorin Rivers
I've gotten pretty good at figuring these out on my own, in fact generally
have learned how to code cross-browser out of the gate, but this is baffling
me.

In not IE6, the ordered lists in the sidebar appear as designed, white
background, orange border around the whole div, orange numbers, and so
forth.

In IE6, the numbers are missing and the border is around each block level
element inside the div.

http://onespot.com/test/seeitwork.html

Clues?
__
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] Border on just the text, not the full width of the element

2007-04-16 Thread Lorin Rivers
I want to have a border-bottom on an h2 that's centered, but not have
the border fill the whole width of the containing element. The content
is dynamically generated, so I don't know exactly how wide to make it,
so that's not an option.

Essentially, WHILE IT HAS NOTHING AT ALL TO DO WITH A LINK, 'CAUSE
ITS NOT ONE, imagine what a center-aligned link would look like, and
that's what I want. I'm working from a comp and that's what's
specified.

Thanks!
__
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] Border on just the text, not the full width of the element

2007-04-16 Thread Lorin Rivers
I'm experimenting, but I think display: inline; or some variation will
do what I want. I want the border to be a different color...

On 4/16/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
 Lorin Rivers wrote:
  I want to have a border-bottom on an h2 that's centered, but not have
  the border fill the whole width of the containing element. The content
  is dynamically generated, so I don't know exactly how wide to make it,
  so that's not an option.

 Wouldn't...
 h2 {text-align: center; text-decoration: underline;}
 ...be ok?

 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/

__
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] IE6 a:hover dimension change...

2006-09-25 Thread Lorin Rivers
Thanks so much for your help on this.

I've never used static before--I thought it was like fixed. I have
SO much to learn...


On 9/19/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
 Lorin Rivers wrote:
  Do you have suggestions in that regard?

  http://mosasaur.dyndns.org:8080/austin_apartment.html

 Sure :-)
 Generally: don't lay out main parts of pages with 'position: absolute'.

 Everything that involves text will need space to grow, and that means
 other element must move to provide that space. Absolute positioned
 elements are independent of each other - unless they are nested, so they
 will simply overlap each other when they run out of space.

 Normal flow and floats will adjust to their non-positioned surroundings,
 so that's a much safer choice for most layouts.

 Quick test: copy and paste the following in the page head - *below* all
 stylesheet links...

 style type=text/css
 /*![CDATA[*/
 #content,#thumbs,#footer{position: static; float: left; width: 560px;}
 #content {margin: 100px 0 10px 150px;}
 #thumbs,#footer {clear: left; margin: 0 0 0 150px;}

 /* kill the 'margin-doubling on floats' bug in IE6 */
 #content,#thumbs,#footer{display: inline;}
 /*]]*/
 /style

 ...and it will take over main parts in that page. The 'position: static'
 nullifies all your positioning from #content down, and then I turn those
 elements into floats and adjust them into place by using margins.
 I haven't perfected any of this - it's just an example, so there's
 plenty of room for more adjustment.

 This should give you some ideas on how to create a self-adjusting
 layout, and as you will see: I have not taken over all absolute
 positioned elements. You can of course turn everything into floats
 and/or normal flow, but that isn't really necessary.

 regards
 Georg
 --
 http://www.gunlaug.no
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] IE6 a:hover dimension change...

2006-09-19 Thread Lorin Rivers
I'm having a weird problem with an image based menu where in IE6, the
height of the reveal changes on mouse-over so you see the top of the
next row of images. It works as expected in other browsers...

Any clues?

http://mosasaur.dyndns.org:8080/austin_apartment.html

It's the top menu.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] IE6 a:hover dimension change...

2006-09-19 Thread Lorin Rivers
That works a treat! Thanks!

Do you have suggestions in that regard?

On 9/19/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
 Lorin Rivers wrote:
  I'm having a weird problem with an image based menu where in IE6, the
   height of the reveal changes on mouse-over so you see the top of the
   next row of images. It works as expected in other browsers...

  http://mosasaur.dyndns.org:8080/austin_apartment.html

 IE6 doesn't respect dimensions, so it expands the elements to make
 whatever is inside them fit. It doesn't happen on :hover, but your
 background-arrangement makes it invisible until you hover over the links.

 The addition of...

 #menu {overflow: hidden;}

 ...will make that bugger more cooperative.


 Advice:
 Test that page with font-resizing across browser-land, and try to
 prevent the resulting overlapping by changing your positioning-methods
 so the layout can grow in size when needed.

 regards
 Georg
 --
 http://www.gunlaug.no
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] CSS-driven dropdowns with JS imageswapping rollover

2006-07-28 Thread Lorin Rivers
I just finished rasslin' with Sucka, which rocks. The challenge is
understanding the specifity and nesting of the list items.

To get the sub-menus to look different from the top-level items (black
on grey, orange back for hover), I did this:

#nav li:hover ul a, #nav li.sfhover ul a {
color: black; font-weight: normal; border-right: none; background:
#ccc; padding: 4px 13px;
}

#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {
background: #f90;}

I'll send you the source if you want...

On 7/27/06, metasilk [EMAIL PROTECTED] wrote:
  began with a suckerfish dropdown style menu. Per client desires, I
 want to have the menu items appear as images (to get the right font)
 after all. The upper level has the appropriate rollover appearance
 (the images change). The drop downs menus, while the appear correctly,
 don't change images.

 Any suggestions as to what to fix to make the lower level ones change also?

 Page: http://www.greenmountainaccess.net/~ktalmage/thirdsector/publicpart.php
 Scripts: 
 http://www.greenmountainaccess.net/~ktalmage/thirdsector/js/rollmenu.js

 (Note: not all images for the list exist yet... )

 Thanks kindly.

 Kir
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] Ultra-specificity in the context of Adam Kalsey's CSS Tabs

2006-07-28 Thread Lorin Rivers
I want to take it step farther and have the sub-tab also be
highlighted based on an additional body class.

I can't get the color to change and this rule doesn't seem to be
working. Any ideas about what I'm doing wrong?

Here's some sample code:

body.section-2 benefits ul#menu li#nav-2 ul#subnav-2 li#benefits a {
color: white;
}


body class=section-2 benefits
ul id=menu
li id=nav-1a href=/static/main.htmlHome/a/li
li id=nav-2a href=/index.htmlCustomer Connect/a
ul id=subnav-2
li id=overview class=subfirsta 
href=/index.htmlOverview/a/li
li id=benefitsa 
href=/benefits.htmlBenefits/a/li
li id=featuresa 
href=/features.htmlFeatures/a/li
li id=componentsa 
href=/components.htmlComponents/a/li
li id=buya href=/buy.htmlBuy/a/li
li id=morea href=/more.htmlTell Me 
More/a/li
li id=testimonialsa 
href=/testimonials.htmlTestimonials/a/li
li id=questions class=sublasta
href=/questions.htmlQuestions/a/li
/ul
/li
li id=nav-3a href=/about.htmlAbout Us/a/li
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Specificity, siblings, descendants

2006-03-08 Thread Lorin Rivers
tap... tap... tap... Is this thing on?

I want to style an unordered list so that the top-level elements are
bold with no bullets, while the items inside these have the bullets,
etc...

#content li
{
list-style-image: url(/images/bullet3.gif);
list-style-type: none;
line-height: 1.2;
}

/*Shout out to: http://www.simplebits.com*/
#content p + ul.nested  li
{
font-weight: bold;
list-style-type: none;
list-style-image: none;
margin-bottom: 0.5em;
}

#content .nested ul
{
font-weight: normal;
margin-top: .5em;
}

I couldn't figure out a way to do this without sibling selectors,
which makes IE cranky...

Suggestions?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Specificity, siblings, descendants

2006-03-08 Thread Lorin Rivers
I have a tendency to over-complicate my css rules...

On 3/8/06, Els [EMAIL PROTECTED] wrote:
 Lorin Rivers wrote:
  tap... tap... tap... Is this thing on?

 Nope - that's a fake one.

har.

so here's how I solved it, based on y'alls hints.
#content .nested li { font-weight: bold; list-style-type: none;
list-style-position: default; list-style-image:none; }
#content .nested li li{ font-weight:normal;
list-style-image:url(/images/bullet3.gif); }

given this markup:
div id=content
ul class=nested
liItem 1
ul
lisub item 1a/li
lisub item 1b/li
/ul
/li
liItem 2
ul
lisub item 2a/li
lisub item 2b/li
lisub item 2c/li
/ul
/li
liItem 3
ul
lisub item 3a/li
lisub item 3b/li
lisub item 3c/li
/ul
/li
/ul
/div

Thanks a bunch!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Pure CSS tooltips

2006-03-07 Thread Lorin Rivers
I've looked at a bunch of the css tooltip sites and the archives and I
have a workaround for this problem, but perhaps someone has a
suggestion on how to achieve what I really want...

===
CSS:
/*shout out to http://mikezilla.html*/
a.popup span { display: none; }

a:hover.popup span
{ display: block; position: fixed; margin: 0.25em; padding: 1em; top:
2em; right: 10em; width: 20em; z-index: 999; background: #ddd;
font-size: 0.9em; color: black; border-width: medium; border-style:
solid; border-top-color: #eee; border-left-color: #eee;
border-right-color: #999; border-bottom-color: #999; }

HTML:
a href=http://www.catb.org/~esr/jargon/html/H/hacker.html;
class=popuphackerspan1. A person who enjoys exploring the details
of programmable systems and how to stretch their capabilities, as
opposed to most users, who prefer to learn only the minimum necessary.
RFC1392, the Internet Users' Glossary, usefully amplifies this as: A
person who delights in having an intimate understanding of the
internal workings of a system, computers and computer networks in
particular./span/a
===

Originally, I had position:relative on a.popup and position:absolute
on a:hover.popup span, which worked OK except on Safari, where it was
clipped to the width of the link text. Any ideas on how to avoid the
clipping?

Thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] looking for Suggestions/Gotcha's to avoid for a multi-stylesheet template type site.

2006-03-07 Thread Lorin Rivers
Here are a few things I'd recommend:
Check your stuff in IE as you go along

Avoid hacks (instead use conditional comments such as:

!--[if lte IE 6]
link charset=utf-8 rel=stylesheet type=text/css
href=CSS/IE6patches.css /
![endif]--
instead

Backup often /or use source control

For me, the hardest thing to get my head around was positioning  floats

it's worth it though...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 Win Questions

2005-10-07 Thread Lorin Rivers

I've got a couple issues on my site that I just can't figure out.

One: the (very) top menu does not display the selected class (but  
the side menu does, using very similar markup)

http://harvestclassic.org/rally/index.html

css:
#topnav a:link, #topnav a:visited
{
color: #fff;
background-color: #000;
text-decoration: none;
}

#topnav a:hover, #topnav a.selected
{
color: red;
text-decoration: none;
}

html:
ul id=topnav
lia href=/index.htmlGENERAL INFORMATION | /a/li
lia href=/rally/index.html class=selectedRALLY  
EVENTS | /a/li

lia href=/rally/events.htmlRALLY SCHEDULE/a/li
/ul


Two: Everywhere BUT IEWin, the two columns' tops are even
div id=rallynav
dl style= float: left; width: 45%;
dta href=index.html  
class=selectedDestination: Luckenbach/a/dt

dta href=show.htmlBike Show/a/dt
dta href=expo.htmlSponsor Expo/a/dt
dta href=raffle.htmlRaffle amp; Auction for  
the Kids/a/dt

dta href=portraits.htmlBike Portraits/a/dt
/dl
dl style=margin-left: 50%; width: 45%;
dta href=dinner.htmlSaturday Dinner amp; Moto- 
Movie/a/dt
dta href=trials.htmlLloyd Allen Memorial  
Trial/a/dt

dta href=funrun.html100cc Fun Run/a/dt
dta href=weather.htmlWeather/a/dt
/dl
br clear=right /
/div

Clue me?


--
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:[EMAIL PROTECTED]
512/203.3198 (m)

__
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] Footer woes--charity website

2005-09-06 Thread Lorin Rivers
I've tried a few things suggested on the wiki, but none seem to work  
in my case.


I want a footer. I want to have variable-length content.

I want a rounded-corner box

I want to stop tearing my hair out.

Hep me please!

Take a look @
http://harvestclassic.org/navbarlayout.html

I've tried floating, clearing, absolute positioning.

The best I've been able to get is to have the footer below the navbar.

It's like the frame has no height--I'm sure that it's obvious, but I  
can't figure it out.


It's for a good cause
--
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:[EMAIL PROTECTED]
512/203.3198 (m)

__
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] linked images taking on a:hover traits

2005-05-17 Thread Lorin Rivers
Try setting the img to display: block
Yep, just tried it and it works.
Images are by default inline
Then you can delete all the 0px stuff...
Woo Hoo! I contributed something!
--
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:[EMAIL PROTECTED]
512/203.3198 (m)
__
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] I hope this is the last time

2005-05-13 Thread Lorin Rivers
On May 13, 2005, at 2:59 AM, Ingo Chao wrote:
Lorin Rivers schrieb:
Allright,
Design change required a little tweaking to get it to this point.  
Now  the top section is ~55px too tall. In IE6 only, of course.
I've taken all the heights, widths, and most padding and margin in  
an  effort to isolate the problem, to no joy.
http://mosasaur.com/clients/less

I fear this is not the last time for your layout in IE6 ;)
you have
div id=lessframetop
  div.../div
  h1.../h1
/div
div id=lesscontent
...
/div
In IE6, you can define
div#lessframetop { ... height: 15px; ...}
but IE6 will expand to fit the following div:
div#lessframetop div { ... height: 55px;... }
similar with h1:
div#lessframetop h1 { ... position: relative; ... top: -60px; }
* html div#lessframetop h1 {... height: 1%; }
Note the word /then/ here: The box's position is calculated  
according to the normal flow ... Then the box is offset relative to  
its normal position. When a box B is relatively positioned, the  
position of the following box is calculated as though B were not  
offset.

This makes it real hard in IE6:
#lessframetop is expanded by the height of div and h1
The dilemma in your design is that you have to assign a height in  
#lessframetop to get a reasonable height for the bg-img. (So you'd  
end in the very same problem by using floats: IE6 will auto-contain  
these floats because of the layout #lessframetop.)

Sorry, before we start a. p. more and more or strike back with neg.  
r.p. this and that, I think you should isolate the lessframetop/ 
lesscontent and(!) its nearest positioned ancestor for a simplified  
testcase that works in FF and breaks in IE without debugging stuff  
and perhaps less orange :)

Ingo

Ingo, you are the BEST.
OK, well I took out all the debugging borders out, as well as the  
position info for h1. The question I should be asking I guess is how  
do I get the h1 to be centered vertically in #frametop and more-or- 
less aligned right?

In FF now, the h1 is left-aligned and below the div and in IE it's in  
the same position, but also makes the containing div that much taller.

--
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:[EMAIL PROTECTED]
512/203.3198 (m)
__
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] div background issues on Mozilla

2005-05-06 Thread Lorin Rivers
On May 6, 2005, at 9:01 AM, Lorin Rivers wrote:
On this page:
http://mosasaur.com/clients/less/
The divs toward the  bottom center should alternate between white  
and light yellow. It renders fine on Safari but on Mozilla the  
there's no background. If I uncomment the debugging borders, the  
background colors DO work. What am I doing wrong?
Jinkies! It really blows in IE. Crud!
--
Lorin Rivers
Mosasaur: Killer Technical Marketing http://www.mosasaur.com
mailto:[EMAIL PROTECTED]
512/203.3198 (m)
__
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/