[css-d] Navlist Problems
Hi All
I am building a site here:
http://www.apbassettsolicitors.co.uk/
http://www.apbassettsolicitors.co.uk/style.css
The navlist is meant to have an icon at one end of the line and then
on hover the icon changes. However, the icon won't go to the end of
the list it stays in the middle and I can't see why?
The list is currently styled like this:
#navlist {
list-style-type: none;
}
#navlist li {
padding: 0;
margin-bottom: 6px;
}
#navlist li a:link {
background: transparent url(images/purple_triangle.gif) no-repeat 0% 50%;
}
#navlist li a:hover {
background: transparent url(images/yellow_arrow.gif) left center no-repeat;
color: #11033F;
}
#navlist li a#current {
background: transparent url(images/yellow_arrow.gif) left center no-repeat;
color: #11033F;
}
As you can see I have tried 0% 50% and also left center. I have tried
putting it before the no-repeat and after the no-repeat. To no avail
it won't go where I want!
Any ideas please?
--
Kind regards
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] Navlist Problems
Richard Brown wrote: Hi All I am building a site here: http://www.apbassettsolicitors.co.uk/ http://www.apbassettsolicitors.co.uk/style.css The navlist is meant to have an icon at one end of the line and then on hover the icon changes. However, the icon won't go to the end of the list it stays in the middle and I can't see why? ... Any ideas please? Hi Rich The image you are using as a background is 60px wide by 68px high. The css is positioning it exactly as you specify, but with such a large image it is being pushed off the sides. Try reducing the size of the image and trimming the surrounding white background. Regards -- Scott Swabey Design Development Director - Lafinboy Productions www.lafinboy.com | www.thought-after.com __ 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] Navlist Problems
Richard; you've also left the browser's automatic left padding on the
list and list items.
To fix, it's simply:
#navlist,
#navlist li {
padding-left: 0; /* or some other suitable amount */
}
Cheers,
Kit Grose
iQmultimedia
__
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] Can a subdivided 6px baseline grid work?
On 8/15/07, Timothy Kelty [EMAIL PROTECTED] wrote: I've been trying to set up some groundwork for setting up future sites on a baseline grid. We starting setting to a 18px baseline, with a 12px body type. Problems we ran into initially dealt with lists, where we weren't satisfied with a full line of leading between list items, but we also didn't want to set it solid, with no spacing. Since we didn't know the amount of list items, we couldnt simply go off the grid temporarily, then adjust the ul/ol to get back on the grid. What my coworker eventually suggested was designing the site to a subdivided baseline of 6px, so for normal body type, 3 baseline heights would equal 18px, the desired leading. A list item also takes up 18px, with 1 baseline (6px) between. So regardless of the amount of items, when the list is done, you're still back on your next 6px line. I'm having trouble getting my head around this whether or not this is a valid method or not. Obviously you could set a grid infinitely small, then everything is 'on the grid', hooray! Any thoughts/criticisms are greatly appreciated, or if you have any other solutions. Thanks I am subscribed to http://webtypography.net/ - which is a project where one of the classic books on print typography is being used as the inspiration for a series on web typography. What you are trying to do seems in keeping with Section 2.2 - maintaining a set measure even after elements of different size disrupt the vertical flow. As you will see, this can be achieved via a combination of margin (in ems) and line-height. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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 Float right placement issue
Christopher McComas wrote: I have the following code on a site, it displays properly in Firefox and IE7, but in IE6 it doesn't display the main content where it should be ... www.getherdnews.com/test.html IE6 is running out of space. The whitespace bug and the auto expansion bug are at play. See: http://www.gunlaug.no/tos/alien/cmc/test_07_081701.html ...for a working copy of your page. Corrections are commented. 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-d] Using BlueprintCSS - trying to make it play nicely with IE 6
Hi everyone, I'm currently fiddling around with BlueprintCSS, a grd based css framework that's been doing the rounds lately, and I'm struggling to find a workaround to how IE6 handles floats: I'm trying to a page using BlueprintCSS that provides the content first, in the source order; it works in FF, Safari, and Opera 9 and even IE7, but IE6 falls over with how it handles the float right column. The site is here: http://stage.chrisadams.me.uk/blueprint/example.html The problem that IE6 is having with the floats is documented here: http://phrogz.net/css/sidefloattest.html The page validates as xhtml, and while there are css errors, they only pertain to the lack of background colours on the page. Does anybody know of a workaround using floats that would let me continue using this framework? __ 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] Using BlueprintCSS - trying to make it play nicely with IE 6
On Fri, 17 Aug 2007 12:21:51 +0100 Chris Adams [EMAIL PROTECTED] wrote: I'm trying to a page using BlueprintCSS that provides the content first, in the source order; it works in FF, Safari, and Opera 9 and even IE7, but IE6 falls over with how it handles the float right column. http://stage.chrisadams.me.uk/blueprint/example.html I couldn't see the version in the css - do you use the latest v0.4 of blueprint? It handles certain IE6 issues. Gruss, Ingo __ 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] Absolute Floated Layout
Hi List, Is there a way to combine floated divs with absolute positioned divs for layout, without having the page behave erratically across several browsers? The page in question is: http://template.dev.advance.net/impact/index.ssf The company I work for would like the content area (FEATURED STORY/ALL STORIES FROM [DATE]:) column to appear at the top of the HTML document, right after the body tag for SEO purposes. While still retaining the look of the current layout. What you should also know about this proposed request is that numerous hands have messed with the code. The CSS sheets being called are a mess and this is the first time I am dealing with it. They expect me to clean up the mess and give them what they want. The other thing is that it is only coded to transitional standards which doesn't validate as is. And they use a proprietary platform called .ssf that behaves like a combination of frames and server side includes. The browsers we support are IE 6 7 and FF on PC and FF Safari on Mac. Basically, I've already told them I didn't think it was a good idea given the time frame and because I'm thinking floats and absolute might not mix well. And because the code is a mess, that it would be better to start from scratch (something which really can't be done at this point given the deadline). So what I wanted to know from you guys is, is there any way to give them what they want and salvage this mess of a mess in a short amount of time? Or is this just really hopeless? All feedback welcomed. TIA, Elli Fussy? Opinionated? Impossible to please? Perfect. Join Yahoo!'s user panel and lay it on us. http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7 __ 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] Absolute Floated Layout
Elli Vizcaino wrote: Hi List, Is there a way to combine floated divs with absolute positioned divs for layout, without having the page behave erratically across several browsers? The page in question is: http://template.dev.advance.net/impact/index.ssf The company I work for would like the content area (FEATURED STORY/ALL STORIES FROM [DATE]:) column to appear at the top of the HTML document, right after the body tag for SEO purposes. While still retaining the look of the current layout. What you should also know about this proposed request is that numerous hands have messed with the code. The CSS sheets being called are a mess and this is the first time I am dealing with it. They expect me to clean up the mess and give them what they want. The other thing is that it is only coded to transitional standards which doesn't validate as is. And they use a proprietary platform called .ssf that behaves like a combination of frames and server side includes. The browsers we support are IE 6 7 and FF on PC and FF Safari on Mac. Basically, I've already told them I didn't think it was a good idea given the time frame and because I'm thinking floats and absolute might not mix well. And because the code is a mess, that it would be better to start from scratch (something which really can't be done at this point given the deadline). So what I wanted to know from you guys is, is there any way to give them what they want and salvage this mess of a mess in a short amount of time? Or is this just really hopeless? All feedback welcomed. TIA, Elli Elli It would help if we could see the page. I got a request for login and password . Do you think you could copy the html to a publicly accessible space? Frank Piuck __ 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] Absolute Floated Layout
Hi List, Here are a couple of links to current live versions of the template I pointed to down below. The template server requires password access which I'm not really allowed to hand over. http://www.nj.com/news/ http://www.pennlive.com/lehighvalley/ Same thing applies and worse they've got more errors. Again all feedback welcomed. TIA, Elli --- Elli Vizcaino [EMAIL PROTECTED] wrote: Hi List, Is there a way to combine floated divs with absolute positioned divs for layout, without having the page behave erratically across several browsers? The page in question is: http://template.dev.advance.net/impact/index.ssf The company I work for would like the content area (FEATURED STORY/ALL STORIES FROM [DATE]:) column to appear at the top of the HTML document, right after the body tag for SEO purposes. While still retaining the look of the current layout. What you should also know about this proposed request is that numerous hands have messed with the code. The CSS sheets being called are a mess and this is the first time I am dealing with it. They expect me to clean up the mess and give them what they want. The other thing is that it is only coded to transitional standards which doesn't validate as is. And they use a proprietary platform called .ssf that behaves like a combination of frames and server side includes. The browsers we support are IE 6 7 and FF on PC and FF Safari on Mac. Basically, I've already told them I didn't think it was a good idea given the time frame and because I'm thinking floats and absolute might not mix well. And because the code is a mess, that it would be better to start from scratch (something which really can't be done at this point given the deadline). So what I wanted to know from you guys is, is there any way to give them what they want and salvage this mess of a mess in a short amount of time? Or is this just really hopeless? All feedback welcomed. TIA, Elli Fussy? Opinionated? Impossible to please? Perfect. Join Yahoo!'s user panel and lay it on us. http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7 __ 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/ Park yourself in front of a world of choices in alternative vehicles. Visit the Yahoo! Auto Green Center. http://autos.yahoo.com/green_center/ __ 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] Fixed Footer
Hi All I'm trying to get a fixed footer to work on this site: http://www.apbassettsolicitors.co.uk/ http://www.apbassettsolicitors.co.uk/otherstyle.css It is failing if the page length increases beyond the browser window: http://apbassettsolicitors.co.uk/column_extend.jpg Any ideas on how to fix this please? Thanks. -- Kind regards Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] Navlist Problems
Hi Kit and Scott
On 17/08/07, Kit Grose [EMAIL PROTECTED] wrote:
Richard; you've also left the browser's automatic left padding on the
list and list items.
To fix, it's simply:
#navlist,
#navlist li {
padding-left: 0; /* or some other suitable amount */
}
Many thanks for your help. It is now working fine.
--
Kind regards
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] Navigation Problem : IE
Hello List, I'm having a problem with my navigation on IE 7. It's pretty basic, stylized anchor tags in an ul, but doesn't work at all in IE 7. No hover effect, the links don't even work. The XHTML is valid, I use some proprietary code in the CSS to stylize the blackboard's scrollbar in Explorer but I don't believe that should be effecting the navigation in such a way. Here's the link: http://www.toddsilverdesign.net/dev/dazil/fit_prof/intro.htm And you can find the CSS here: http://www.toddsilverdesign.net/dev/dazil/fit_prof/FitProfStyle.css Any help would be greatly appreciated. Thanks. --Todd __ 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] Can a subdivided 6px baseline grid work?
Richard Grevers wrote: On 8/15/07, Timothy Kelty [EMAIL PROTECTED] wrote: I've been trying to set up some groundwork for setting up future sites on a baseline grid. We starting setting to a 18px baseline, with a 12px body type. Problems we ran into initially dealt with lists, where we weren't satisfied with a full line of leading between list items, but we also didn't want to set it solid, with no spacing. Since we didn't know the amount of list items, we couldnt simply go off the grid temporarily, then adjust the ul/ol to get back on the grid. What my coworker eventually suggested was designing the site to a subdivided baseline of 6px, so for normal body type, 3 baseline heights would equal 18px, the desired leading. A list item also takes up 18px, with 1 baseline (6px) between. So regardless of the amount of items, when the list is done, you're still back on your next 6px line. I'm having trouble getting my head around this whether or not this is a valid method or not. Obviously you could set a grid infinitely small, then everything is 'on the grid', hooray! Any thoughts/criticisms are greatly appreciated, or if you have any other solutions. Thanks I am subscribed to http://webtypography.net/ - which is a project where one of the classic books on print typography is being used as the inspiration for a series on web typography. What you are trying to do seems in keeping with Section 2.2 - maintaining a set measure even after elements of different size disrupt the vertical flow. As you will see, this can be achieved via a combination of margin (in ems) and line-height. So long as you specify things being aware that - unlike print typography - you have no control over font choice or size ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Footerstick, and transparent columns and IE6
Thank you for taking the time to look at my problem. QUESTIONS? 1. How can an absolutely positioned background div be effected by relative divs not contained in it? 2. Is there a better approach to achieving the layout I am attempting? I am trying to combine the footer stick technic with faux columns and opacity on this page: http://sandboxv3.erau.edu/pr/0pr-dev/ #page and #nonfooter are used to achieve the 100% height. The footer normally not visible gets a negative margin to bring it in to the window. Code borrowed from: http://www.themaninblue.com/writing/perspective/2005/08/29/ I can't use either of these divs for the faux columns because the columns must be transparent to allow the clouds image (body background image) to show through. If I make either either of these dives transparent then all the page content contained in them becomes transparent also. The only solution I came up with is a transparent absolute div centered with a repeating image to create the columns. Since the footer would always be at the bottom of the window, I should not have the problem of the faux columns showing under the footer. This works fine everywhere but IE6. To see the problem in IE6 resize window and scroll to the bottom. The background absolute div is somehow shortened and does not reach the footer. If you refresh the page the div magically extends to the footer until you resize the window again. Here is my structure. body div id=columns/div div id=page div id=nonFooter div id=header ...stuff /div!--END HEADER-- div id=content div id=contentMain/div div id=section_navstuff/div div class=clearer/div /div!-- END content -- /div!-- END nonFooter -- /div!-- END page -- div id=footerstuff/div /body /html Arnold Gregory IT Web Services Embry-Riddle Aeronautical University __ 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] IE6 still won't display drop-down
Here's the page: http://www.bremenhospital.org/testsite/pages/ specialists.html CSS for the pertinent part is in the HTML head I can't get the Specialties button to drop down when hovered in IE6. A couple of people looked at this last week, but I still haven't been able to resolve it, though I have to thank Alan Gresley for helping resolve another nagging issue I had. Can anyone help me get this working in IE6? Thanks! Chris Rahe Executive Director of Marketing and Development Community Hospital of Bremen (574) 546-8011 [EMAIL PROTECTED] __ 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] Table-like layout for UL/LI
Hi,
I am trying to simplify the code for an existing site. We have a
button bar that is rendered using a table. I figured, why not switch to
UL/LI but the problem I ran into is that the browser will automatically
resize the table columns to spread them out evenly but won't do this for
the LI elements.
table { border-collapse: collapse; width: 800px; }
ul { width: 800px; display: block; overflow: auto;}
li { display: block; float: left; }
table
trtdone/tdtdtwo/td/tr
/table
ul
lione/li
litwo/li
ul
As you can imagine, these two renderings look totally different. I'd
heard of display: table and managed to recreate a nice table-esque
layout using the UL/LI inside a div, which would suite me perfectly,
except IE doesn't support display: table. Does anyone have a workaround
where I can re-create the auto-sizing layout of the table without using
the table? I have worked around the problem so far by simply keeping
the table layout but cleaning up the code, but I'd prefer that smug
feeling of getting rid of the table once and for all.
Apologies for not having a live sample as my workplace has no public
webservers that aren't production.
Mark
__
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] Table-like layout for UL/LI
On Fri, 17 Aug 2007 18:02:21 -0400, Mark Richards wrote: Hi, I am trying to simplify the code for an existing site. We have a button bar that is rendered using a table. I figured, why not switch to UL/LI but the problem I ran into is that the browser will automatically resize the table columns to spread them out evenly but won't do this for the LI elements. Hi Mark, Thierry has a solution that seems to be a nice compromise: http://www.tjkdesign.com/articles/make_an_html_list_look_like_a_table.asp Cordially, David -- __ 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/
