Re: [css-d] Sliding Faux Columns with Rounded Corners
Doesn't look good in IE, all the text is in a dark charcoal background. Graham Cook ph: 0419 316 815 web: www.uaoz.com email: [EMAIL PROTECTED] -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Arian Hojat Sent: Wednesday, 20 September 2006 5:15 PM To: css-d@lists.css-discuss.org Subject: [css-d] Sliding Faux Columns with Rounded Corners Hello Everyone, I spent the night tonight trying to make Sliding Faux Columns but with rounded edges at top and bottom of the columns. Also I wanted it so the layout can lay on top of a gradient background where the gradient will 'bleed through' the transparent areas of the rounded corners. This is what I came up with. http://arihoj.freehostia.com/rsfc/rsfc.html I thought it was decent for a 1st time effort. Its supposed to be a mockup of one of Adobe's layout... http://labs.adobe.com/technologies/flash9as3preview/ Had a question though... Id like to make it so I dont use padding to achieve the background-image layout, at least in the middle #body3 area where my content is. For example, look at how the bottom borders of the list in the right sidebar dont extend all the way to the right. It is because padding is used on its parent to push the background-images into place without them overlapping and hiding each other. My 1st idea was to get rid of the left and right padding of 21px in the #body2 rule, and somehow configure rest of layout to also not use padding... But seems like it ruins the layout. Another idea is maybe move all the top and bottom areas to a 'negative margin' rounded corner method, so no padding is necessary anywhere, I think id prefer this method... But as you can see it doesn't bleed through the corner images anymore. http://arihoj.freehostia.com/rsfc/rsfc_negMargins.html Any ideas? Thanks in advance, Arian __ 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] page check request
There's really not much to check - no links active, no buttons active - just a very basic page. In general, a few questions/observations (I'm running IE6 and Ffox 800x600) * In IE dealer portal displays over 2 lines and a there is a gap of over half the width of the car below between the dealer portal right border and the right containing boundary * I find trying to read the buttons very difficult with the white text on yellow background * Increasing the font size causes several problems. The 3 images bottom right wrap onto 2 lines and the Did you know. text becomes partially obscured, dealer portal wraps beneath about and contact, Select a model wraps and orange bullet to left is no longer top aligned. * It's a pity that the overall width is restricted to 750px as on my laptop which is set for 1680px width the page takes up just a fraction of the screen real estate yet I still have all the problems above if I try to increase the font to a readable size. Regards Graham Cook www.uaoz.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] Class and id used together
Hi Kerry,
Doing this presupposes that you will only have one blue item and one red
item on a page. What if you want to create anything else on the page with a
blue background? I would keep them all classes and use the structure below
.box {border: 1px solid black; }
.blue{background-color: blue; }
.red{background-color: red; }
div class=blue box/div
div class=red box/div
Regards
Graham Cook
www.uaoz.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] Aligning List Of Name:Value Pairs On Colon
Hi Curious, Firstly, correction to dd style, add margin-left:10.25em; Secondly, the semantics dtMarge/dt ddHomer's wife/dd Your example would define the other way around, wouldn't it? I believe your original requirement of name: value fits the example by Chris above, and does not swap the items around. To expand on the example, additional dds could be appended, eg: dl dtHomer/dt ddMarge's layabout husband/dd ddBart's dad/dd ddSpringfields second biggest consumer of Duff/dd dtMarge/dt ddHomer's wife/dd ddLisa's mum/dd ddSpringfields biggest user of blue hair dye/dd /dl And the reason that these fit more elegantly than a table? Compare the code above to a table below (which really should also should include thead, tbody and col id's), it it just so much more concise and no blank cells. Furthermore, when read by a screenreader the relationships become self evident. table tr tdHomer/td tdMarge's layabout husband/td /trtr td/td tdBart's dad/td /trtr td/td tdSpringfields second biggest consumer of Duff/td /trtr tdMarge/td /trtr td/td tdHomer's wife/td /trtr td/td tdLisa's mum/td /trtr td/td tdSpringfields biggest user of blue hair dye/td /tr /table Graham Cook www.uaoz.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] Highlighting text
I tried setting the z-index style of the span to -1, but on Firefox, this
completely hides the span behind the pre.
I tried setting the span opacity's to 0.5,, but that makes both the text
and
the span blurred.
Can someone suggest a way to accomplish that on all browsers?
Change your css as below.
pre { padding: 0; margin: 0;position: absolute;z-index:3; }
#comment1 {
position: absolute;
background-color: #00;
top: 19px;
left: 81px;
width: 76px;
height: 15px;
z-index: 1;
}
Regards
Graham Cook
www.uaoz.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] Aligning List Of Name:Value Pairs On Colon
-Original Message-
Here's a case for a definition list. Following code is very basic, but you
can build on it however you like.
Graham Cook
www.uaoz.com
style
dt {
display:block;
float:left;
width:10em;
text-align : right;
}
dd {
display:block;
width:10em;
text-align : left;
}
/style
dl
dtName:/dt ddValue/dd
dtAnother Name:/dt ddAnother Value/dd
dtOther Name:/dt ddOther Value/dd
/dl
__
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] FW: Setting width:auto and min-width in IE
Hi Philip,
It may not be pretty or the most standards compliant code, but it DOES work.
Try the code below.
Regards
Graham Cook
www.uaoz.com
style
.setmin{
min-width:100;
width:expression(this.clientWidth this.currentStyle[min-width]?
this.currentStyle[min-width] :);
}
.setexact{width:100px;}
/style
/head
body
input type=button value=test1br
input type=button class=setexact value=test1br
input type=button class=setmin value=test1br
input type=button class=setmin value=test1test1test1test1test1test1
/body
__
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] Eureka!
Hi Angela, Sorry to tell you this but you still have a few problems in IE. I am finding that on mouseover the highlighting of the parent item (eg who what etc) is slow to display, and more importantly, when moving my cursor up to the submenu item, if I do not move the cursor across the white line border the submenu closes. The situation worsens if I wait for the parent menu to highlight, then this problem sometimes also occurs regardless of where in the submenu the cursor goes. If you need further explanation I could possibly create a small screen capture and send it to you off list. Regards Graham Cook www.uaoz.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Angela Trigg Sent: Saturday, 5 November 2005 1:54 PM To: 'css-discuss' Subject: [css-d] Eureka! Thanks to everyone for your suggestions, and words of encouragement! Based on various suggestions I decided to get rid of p7 and go with a hover to show the UL based on this article: http://www.tjkdesign.com/articles/dropdown/default.asp and then tweaked it to my design (so it drops up) and bingo- it works in IE/WIN 6.1, Firefox, and NN7!! I just need to do some cleanup (dropup going up too far in NN7; space showing in IE between menu and redline, etc), but main hurdle jumped!! __ ANGELA TRIGG * TRIGGERID www.triggerID.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-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] Rounded tabs in IE
Hi Tammy,
The following url may assist
http://www.telstra.com.au/standards/accessibility/training/comparison.htm .
I wrote this a few months ago. The stylesheet for the horizontal tabs is
below. You will have to sdjust the margin and padding offsets to suit your
images but it should give you a few leads. In this example the active tab
also displays a tick in the tab to the left of the text, you will not
require this.
Hope it helps
Graham Cook
www.uaoz.com
style
/* Styles for horizontal tabs */
#horizTabs{
display:block;
height:20px;
width:100%;
margin:0px 0px 10px 0px;
padding-top:5px;
background-color:#6699ff;
}
.sTTab {
background-color:#6699ff;
pading:0px ;
margin: 0px;
height:20px;
white-space: nowrap;
display:inline;
}
.sTTab li{
pading:0px ;
margin-right: 3px;
height:20px;
display:inline;
white-space: nowrap;
background:#99ccff url(tab_left_inactive.gif) top left
no-repeat;}
.sTTab li.siteactivetabnavL0 {background:#fff ;}
.sTTab a{
font-family: Verdana,Arial,sans-serif; font-size: 11px;
color: #003366;
background: url(tab_right_inactive.gif) top right no-repeat;
text-decoration: none;
height:20px;
margin:0px 0px;
margin-top:-5px;
text-align : center;
vertical-align : middle;
font-weight:normal;
padding:3px 8px 5px 8px;
}
* html .sTTab a{padding:02px 8px 5px 8px;}
.sTTab li.siteactivetabnavL a{
font-weight:bold;
}
.sTTab li.siteactivetabnavL{
background: #fff url(tab_left_inactive.gif) top left
no-repeat;}
/* End styles for horizontal tabs */
/style
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tamara Jackson
Sent: Wednesday, 26 October 2005 2:08 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Rounded tabs in IE
Hi everyone
I'm working on my first CSS website, and have run into a problem. I'm
trying to create a rounded tab, but it just won't display properly in
IE. I have two different attempts at getting this working:
First go -
http://www.meetup.developer.graphyx.net/blacksmith/test/index.html
Displays fine in FF and Opera on Windows (don't have a Mac), but the
left part of the tab won't display in IE.
Second go -
http://www.meetup.developer.graphyx.net/blacksmith/test/test2/index.html
Displays the same in FF, Opera and IE, but only if I have an extra span
tag with a letter in it that goes below the normal font line (in this
case, a p).
Can anyone help me out with getting the tab to display properly?
Thanks :)
Tammy
__
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/
