Re: [css-d] Rounded Corners -- Simplest Way
Here's how I do it, yes it uses divs but it's always served me very well: http://jake.cfwebtools.com/2008/02/13/css-rounded-corners/ Jake Churchill CF Webtools 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 Sohail Aboobaker wrote: > Hi, > > What is the simplest way to create rounded corners using CSS. I saw a > technique using 3 extra div tags for three corner images (left-bottom, > right-bottom, left top) which seemed cumbersome and the posting was old. Are > there any newer and simpler ways of creating rounded boxes containers? > > Regards, > Sohail > __ > 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] a picture with in a picture
Here's a way to get png transparency to work in IE6: http://jake.cfwebtools.com/2007/09/17/ie6-png-transparency-fix/ ------ Jake Churchill Team Leader 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 From: David Hucklesby <[EMAIL PROTECTED]> Sent: Saturday, March 08, 2008 8:25 PM To: Rafael <[EMAIL PROTECTED]> Subject: Re: [css-d] a picture with in a picture On Sat, 08 Mar 2008 17:38:59 -0600, Rafael wrote: > T wrote: > [ยทยทยท] >> Use .png for the frame, cos it has excellent transparency support. >> > Yet another reason not to use it: PNG images don't work in IE6 (and, although > we all > regret this, IE6 is still the dominant browser in the real world). > PNG-8 works just fine: Cordially, David -- __ 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] Rounded corners on menu
http://jake.cfwebtools.com/index.cfm/2008/2/13/CSS-Rounded-Corners _ Jake Churchill Team Leader 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Albert van der Veen Sent: Tuesday, February 26, 2008 8:47 AM To: CSS Discuss Subject: [css-d] Rounded corners on menu Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ 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/ No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM __ 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] Request for Comments on this CSS Stylesheet Approach
On the contrary, this is a particularly nice feature when it comes to
multiple skins. I can create completely different look and feels with only
a change to an ID, thus allowing the user to completely change the layout of
the site without my intervention.
_
Jake Churchill
Team Leader
11204 Davenport, Ste. 100
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Michael Adams
Sent: Monday, February 18, 2008 2:13 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Request for Comments on this CSS Stylesheet Approach
On Mon, 18 Feb 2008 10:36:11 -0600
Jake Churchill wrote:
> I'd set an ID in the body tag for each individual page and divide up
> your CSS based on that. body id="index", body id="common", etc.
>
> Then you've got
>
> #index ... {
> }
>
> #common ... {
>
> }
>
> I do a lot of work with a product called Farcry which is a content
> management system and this is how I change styles on a per-page basis.
>
This just feels like a cludge necessary only because of the restrictions
of your CMS.
--
Michael
All shall be well, and all shall be well, and all manner of things shall
be well
- Julian of Norwich 1342 - 1416
__
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/
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.516 / Virus Database: 269.20.7/1284 - Release Date: 2/17/2008
2:39 PM
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.516 / Virus Database: 269.20.7/1284 - Release Date: 2/17/2008
2:39 PM
__
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] Request for Comments on this CSS Stylesheet Approach
I'd set an ID in the body tag for each individual page and divide up your
CSS based on that. body id="index", body id="common", etc.
Then you've got
#index ... {
}
#common ... {
}
I do a lot of work with a product called Farcry which is a content
management system and this is how I change styles on a per-page basis.
_
Jake Churchill
Team Leader
11204 Davenport, Ste. 100
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Jason Crosse
Sent: Monday, February 18, 2008 10:27 AM
To: 'CSS Discussion'
Subject: Re: [css-d] Request for Comments on this CSS Stylesheet Approach
On 18/02/2008 16:09, Rick Faircloth wrote:
> I've realized at the start of a pretty large site, including
> Internet and Intranet sections, that my stylesheet could grow
> very large and even finding sections of styles for particular
> pages could be a cumbersome task.
>
> What I'm considering is having one main stylesheet, then
> having supplemental stylesheet for the various pages I will create.
> E.g., for a particular page, I would have main.css, plus index.css.
> For announcements, I would have main.css, plus announcements.css.
>
> I would be avoiding loading a lot of irrelevant styles for a particular
> page and make finding style references much easier, too.
You could take the modular approach. Instead of creating stylesheets
for individual pages, you could, for example have
* common.css
* web.css
* intranet.css
Having individual style files for individual pages seems worse than
embedding styles in the head of a document. It seems to me you've
got all the disadvantages plus extra calls to the server.
--
http://antanova.blogspot.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/
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.516 / Virus Database: 269.20.7/1284 - Release Date: 2/17/2008
2:39 PM
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.516 / Virus Database: 269.20.7/1284 - Release Date: 2/17/2008
2:39 PM
__
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] FIXED: menu troubles
I believe I have this fixed. Thank you for the reference to http://www.aplus.co.yu/lab/z-pos/. I relatively positioned the #header and provided a z-index and it seems to work now. _ Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -Original Message- From: Martin Heiden [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 9:43 AM To: Jake Churchill; [EMAIL PROTECTED] Subject: Re: [css-d] menu troubles Jake, on Friday, April 13, 2007 at 16:25 Jake Churchill wrote: > I have a page with a navigation menu across the top with a single level > dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is > that the dropdown from the main navigation menu appears under the side > navigation menu. In firefox it works correctly. This project is very > time-sensitive so I'm trying to work through this as quickly as possible. Try to set a z-index on #header. I can't test it now, but it'll probably work. More on z-index an IE here: http://www.aplus.co.yu/lab/z-pos/ regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] menu troubles
I have a problem that I've run into before and my company had to outsource it to a CSS Guru (Sandra Clark). While I truly appreciated her help the last time, I want to work through this myself. I have a page with a navigation menu across the top with a single level dropdown and a sub-nav menu on the left sidebar. My problem (IE only) is that the dropdown from the main navigation menu appears under the side navigation menu. In firefox it works correctly. This project is very time-sensitive so I'm trying to work through this as quickly as possible. The page url is http://cfas2.cfwebtools.com/index.cfm?objectid=E6D20202-9027-F64A-799622C32F C8C158. I'm fairly decent with CSS but when it comes to more advanced issues like this I'm still a noob. Can anyone help me out? Thanks! PS. I didn't post any code because there's a lot of it. If you need any of it, please let me know and I'll supply it. _ Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout issue
Did you try display:block? That along with a position:relative and a
top/left attribute usually fixes this kind of thing for me.
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
Dave Goodchild wrote:
> Hi all, I have a layout issue in IE (6/7) on this page:
>
> http://dontjustsitthere.co.uk/stage/
>
> wherein the container holding the shop content (T-shirt image and shop text)
> is dropping down. I have tried display:inline and position:relative to no
> avail! Any ideas?
>
> The css used to build this part of the page comprises the following:
>
> .homeimage {
> float: left;
> clear: left;
> background-color: #fff;
> color: #000;
> width: 130px;
> min-height: 170px;
> margin: 10px;
> }
>
> .homeimage img {
> margin: 0;
> padding: 0;
> }
>
> .homecontent {
> float: left;
> background-color: #eaf3fd;
> color: #000;
> min-height: 170px;
> width: 300px;
> margin: 10px;
> font-size: 80%;
> }
>
> .homecontent ul {
> list-style-type: none;
> font-size: 100%;
> }
>
> .homecontent li {
> font-weight: bold;
> text-transform: uppercase;
> }
>
> .shop {
> min-height: 352px;
> width: 230px;
> margin-left: 490px;
> margin-top: 20px;
> background-color: #fff;
> color: #000;
> padding: 5px;
> }
>
> .shop p {
> font-weight: bold;
> text-align: center;
> }
>
> .blog {
> min-height: 160px;
> width: 230px;
> margin-left: 490px;
> margin-top: 20px;
> background-color: #a8ccf4;
> color: #000;
> padding-top: 10px;
> }
>
> .blog h3, .shop h3 {
> font-size: 110%;
> text-align:center;
> }
>
> .blog li {
> font-size: 105%;
> margin-bottom: 5px;
> margin-left: -18px;
> }
>
> .blog li a:link, .blog li a:visited {
> color: #000;
> text-decoration: none;
> }
>
> .blog li a:hover, .blog li a:active {
> color: #000;
> text-decoration: underline;
> }
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] height issue
I have an issue that comes up a lot that I have never found a good fix for. A lot of the sites I support have a standard 2 column display. The left column is the navigation and the right is the content. There is a wrapper around the entire thing and a footer at the bottom. The issue that I see is that let's say the navigation area is 700 px high and the content area is 1000px high. It works great. However, if the navigation is 700px and the content is only 500px, the footer comes up too far and the navigation area overlaps at the bottom. I don't have an example of this right now, I just want ideas. Like I said, there is always a wrapper around the whole thing so why does the footer (outside of the wrapper) get displayed under the navigation if there is a wrapper? In other words, how do I make the wrapper assume the height of either of the child elements to ensure that the height is always correct? I hope I'm making sense. I know what I want to say, it's just not coming out really well right now. Thanks in advance for any suggestions anyone might have. -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width problem with extremely long string
We have a tracking system for clients with the width of the content area set to 1125px. A client pasted some debugging code into the editor and included in there was the http_referer variable which contained the string that I pasted below. https://www.neirelo.com/members/reports/Client_cost_detail_Display_new.cfm?tjob_desc=&REPTYPE=All&to_dept=&tlevel_desc=&file_status=&prior_status=&tResponse_desc=&FROM_DATE=%7Bd%20%272006%2D10%2D01%27%7D&stype_desc=&job_user1=&tdept_desc=&to_level=&program_type=&to_location=&to_area=&to_response=&TO_DATE=%7Bd%20%272006%2D12%2D31%27%7D&tloc_desc=&to_job=&cur_prop_status=&move_reason=&job_user2=&tarea_desc=&last_name=&Policy_desc=&SERVICES=0&first_name=&web_name=&emp_id=&UID=232&New_state=&Policy_nbr=&new_status=&ccode=&TBUS_UNIT_DESC=&hr_contact=&intl=0&sort=policy_nbr So, instead of a visually appealing 1125px, I now have an annoying 4003px. Is there a way in CSS to force the string to get cut off or scroll to see the rest so my content area isn't messed up? I'd prefer no solutions that have to do with absolutely positioning this element because I already tried that and it really messed up the display. Thanks in advance. -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 __ 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] a:visited - font-size
Personally I like sites that change the weight and style of visited
links. For example, if all links are bold, then make visited links
normal. If all links are normal, make visited links italic. Something
like that. I don't generally like a bunch of different sizes of text.
I think it makes it difficult to read.
-Jake
Felix Miata wrote:
> On 2007/01/15 14:25 (GMT-0800) Stephan Wehner apparently typed:
>
>
>> Thinking about styling "visited links", in a site like craigslist.org,
>> it would make sense to me to change the font-size
>>
>
>
>> a:visited {
>> font-size: 130%
>> }
>>
>
>
>> Are there sites that do that? Is it a bad idea?
>>
>
>
>> With a large collection of links (like at craigslist) one may assume
>> (on page-reload) the user may like to revisit pages they checked in
>> the past. By increasing the links font size, they are both easier to
>> locate, and easier to actually click on.
>>
>
> The traditional way makes a lot more sense to me (purple instead of blue
> - i.e. different color for visited rather than different size):
> http://www.useit.com/alertbox/20040503.html
>
--
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS & IE6 butting heads
I need some help with a CSS menu that I'm writing. It is a simple 2
level menu, level 1 is a horizontal list, level 2 is a dropdown list. I
have this working in all browsers, but I ran into a hitch with IE6. The
site is http://cfwt.cfwebtools.com
The active 1st level menu item will have class active and any anchor
with a sub menu will have class drop. 2nd level menus have class
msubnav. When I have a menu item with class active and an anchor with
class drop, the sub menu does not display.
I've validated my HTML and CSS through W3C's validators and everything
is clean. I just can't figure this out for some reason. I copied the
code below. Let me anticipate and answer one question up front. The
object tags inside the anchor tags are there because the validator said
a ul tag cannot be embedded in an anchor tag so the HTML wouldn't
validate without it. And I couldn't validate the CSS before the HTML
was first validated. It didn't change how any of it worked. I've since
removed the object tags and as I said, nothing changed.
If anyone has time, please have a look at this and give me some
suggestions. I've been stuck for 2 days now on this same issue.
Here's the HTML code for the menu:
Home
Support
Customer
Login
Email
Support
Projects
Change
Requests
Hosting
Customers
Services
Contact Us
project
2
Projects & Clients
project
1
Hosting
Here's the CSS:
/* Main Menu Navigational Design */
#mnav {
float: left;
width: 100%;
margin: 0px;
padding: 0 15px;
list-style: none;
}
#mnav li {
float: left;
margin: 0;
padding: 0px;
font-size: 16px;
text-transform: Uppercase;
}
#mnav a, #mnav a.drop {
float: left;
display: block;
margin: 0;
padding: 4px 15px 2px 15px; /* Adujsted according to #mmenu heigth */
font-size: 14px;
font-weight:bold;
color: white;
text-decoration: none;
}
* html #mnav {
width:770px;
}
/* IE 6 HACK */
* html #mnav a, * html #mnav a.drop {
padding: 7px 15px 2px 15px; /* Adujsted according to #mmenu heigth */
height:22px;
}
/* IE 7 HACK */
html > body #mnav a, html > body #mnav a.drop {
height:22px;
}
#mnav a:hover {
background-color: #8D97A5;
}
#mnav li.active a, #mnav li.active a:visited, #mnav li.active a:link,
#mnav li.active a:hover {
background-color: #8D97A5;
}
#mnav li.active ul.msubnav li a, #mnav li.active ul.msubnav li
a:visited, #mnav li.active ul.msubnav li a:link {
background-color:#919191;
}
#mnav li.active ul.msubnav li a:hover, #mnav li ul.msubnav li a:hover {
background-color: #8D97A5;
background-image: url('/images/CF_Icons/cfwrenchTiny_orange.gif');
background-position: left center;
background-repeat: no-repeat;
}
/* Main nav, second level */
/***/
/*COMMON/
/***/
.msubnav {
position:absolute;
padding:0px;
width:165px;
background: #919191;
list-style-type:none;
display:block;
visibility:hidden;
}
.msubnav li, .msubnav li a {
position:relative;
width:165px;
display:block;
background: #919191;
}
.msubnav li {
text-indent:3px;
}
/***/
/***FF**/
/***/
.msubnav {
margin:26px 0px 0px 0px;
}
/***/
/**IE 7*/
/***/
*:first-child+html .msubnav {
margin:4px 0px 0px -18px;
}
/***/
/**IE 6*/
/***/
* html .msubnav {
margin:5px 0px 0px -18px;
}
/* make the second level visible when hover on first level list OR link */
#mnav :hover ul, #mnav :hover table {
visibility:visible;
}
--
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
__
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/
