Re: [css-d] Creating inner border on hover
Richard Grevers wrote: On 4/3/08, Marcelo de Moraes Serpa [EMAIL PROTECTED] wrote: Hello, http://201.51.69.207:8081/fotos Take a look at the thumbs. Hover the mouse over them. You can see a inner border is created. However, it isn't yet the way I wanted. Becouse of the margin rule, the img element jumps a pixel towards the top. I want something like the effect in this page: http://www.globo.com/ (hover on any of the thumbs there and see) and have failed to duplicate the effect. If someone could helpe me or at least put me in the right direction I would be grateful! I have isolated an minimised the code they are using at http://www.dramatic.co.nz/testing/innerborder.html The effect requires the image to have display:block and a parent with overflow:hidden. If the parent is an a element, then the effect will work on IE6. On hover, the parent is resized (reduced by twice the border width, the border is added, and a negative margin applied to the image to prevent it moving. The original used multiple classes in order to control color, and of course you need a separate class for each size of image you want to use the effect on. I can't see the page you are referring to but it sounds like an easy option would be to have a border round your image all the time. When it is in a non-hover state you should set the border to the background colour so it can't be seen and then on hover you can change it to be the desired colour. __ 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] Gap between links
Bill, Yes, thank you, it did work - perfectly in fact. Cheers, Harry Bill Brown wrote: Hi Harry, You can fix this by removing the white space between your HTML tags, like so: ul id=navigation li class=homea href=danny.htmlHome/a/li li class=servicesa href=services.htmlServices Offered/a/li li class=abouta href=about.htmlAbout Us/a/li li class=contacta href=contact.htmlContact Us/a/li /ul Completely inelegant, I know, but it works. Hope it helps. --Bill Foundation Flash wrote: Hey all, It's funny really - I've been sitting here, reading all the the messages posted on this list and thinking 'There must be something I can write in about' - well, now there is a problem that needs fixing, albeit a very small one. Virtually no work has gone into the project this far, so please take pity, but there is a very small problem I would like to get cleared up. I suppose I had better give you a link to look at first, so here it is: http://shrinkify.com/2od ; CSS: http://shrinkify.com/2oe . Both I have validated. Now, if you look at the navigation area, hover over a link, and then move left or right towards the next link, you will see that the link stops a few pixels before the next one starts. How can I rectify this? I just want to know so I can correct it and don't make the same mistake again. Thanks, -- Harry Burt Head Designer, *Foundation Flash* For more information about our Flash and Web Design services, see: /http://www.foundation-flash.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] SEO and CSS
If you site validates it means the code is clean and to the standards set by the W3C. That should be goal number one. If you website content contains your keywords and phrases you are paying for or are targeting, you have done all you can do and all you should expect CSS and XHTML to offer you. If you have a table or two, it won't hurt your SEO as long as the code validates. The bottom line is CSS and XHTML won't take away the need to market and promote your website, it will only make it that much easier. Cheers, Cory -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, April 02, 2008 11:37 AM To: css-d@lists.css-discuss.org Subject: [css-d] SEO and CSS Are there any good resources on the best way to create a standards/accessible totally CSS website with maximum Search Engine Optimization? In other words, how can I create a site using only xhtml and css and ensure that it will be found in the search engines and at the highest possible listing? Thanks, Bryan **Planning your summer road trip? Check out AOL Travel Guides. (http://travel.aol.com/travel-guide/united-states?ncid=aoltrv0003000 016) __ 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/
[css-d] SEO and CSS
Are there any good resources on the best way to create a standards/accessible totally CSS website with maximum Search Engine Optimization? In other words, how can I create a site using only xhtml and css and ensure that it will be found in the search engines and at the highest possible listing? Thanks, Bryan **Planning your summer road trip? Check out AOL Travel Guides. (http://travel.aol.com/travel-guide/united-states?ncid=aoltrv000316) __ 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] [ADMIN - OFF TOPIC] Re: SEO and CSS
At 12:36 -0400 2/4/08, [EMAIL PROTECTED] wrote: Are there any good resources on the best way to create a standards/accessible totally CSS website with maximum Search Engine Optimization? In other words, how can I create a site using only xhtml and css and ensure that it will be found in the search engines and at the highest possible listing? Thanks, Bryan SEO has nothing to do with this list. http://www.google.com/search?q=css%20seo should more than help you on your way, what with an article from Alistapart, Webmasterwhirled, Searchengineblah et al amongst the first results. Alex css-d moderator __ 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] Star-html hack in IE7
Hi, What are the problems with the star hack into IE7? Must I use conditional comments or there are other ways? I hope so... Thanks in advance. -- ~ Cristian Palmas ~ __ 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 and IE7 on the same machine
Hi, Can I install on my Win XP SP2 PC Internet Explorer 7 but keeping the IE6 for test purposes? Thanks -- ~ Cristian Palmas ~ __ 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 and IE7 on the same machine
This contains everything except IE 7: http://tredosoft.com/Multiple_IE This contains IE 7: http://tredosoft.com/IE7_standalone On Thu, Apr 3, 2008 at 11:44 AM, Cristian Palmas [EMAIL PROTECTED] wrote: Hi, Can I install on my Win XP SP2 PC Internet Explorer 7 but keeping the IE6 for test purposes? Thanks -- ~ Cristian Palmas ~ __ 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/
[css-d] FF and IE problems
On my site I have a sidebar that is set to float left, and then content that is set to float none. This works and looks fine in FireFox but in IE the content slips below the sidebar? I have tried a number of different css moves and html moves but keeps resulting in the same problem please help, Andrew __ 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] FF and IE problems
On 03-Apr-08, at 10:59 PM, Andrew Doades wrote: On my site I have a sidebar that is set to float left, and then content that is set to float none. This works and looks fine in FireFox but in IE the content slips below the sidebar Without a URI, it is difficult to pinpoint the problem affecting your construction. However, the numerous layouts available here [1] provide a stable base on which you may build - both two and three column layouts are available; fixed, fluid-width and many permutations thereof. Best, - Rahul. [1] http://blog.html.it/layoutgala/ __ 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] Left nav bar is cut off on IE6
Hello, Please take a look at this page (www.atlantagoldenrugs.com) in IE7 and Firefox. As you can see, the last item in the left navigation bar is PGI Rugs. If you look at the page in IE6, the nav bar is cut off at TajMahal. An screenshot can be found here: http://farm4.static.flickr.com/3159/2384995637_1919598094_o.png Any suggestion on how to fix this? 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/
Re: [css-d] Star-html hack in IE7
Cristian Palmas wrote: What are the problems with the star hack into IE7? No problems ... IE7 doesn't recognize the 'star html' hack when in standard mode, only when in quirks mode. Must I use conditional comments or there are other ways? I use the @media hack to serve IE7 and older versions a separate stylesheet, as described here... http://www.gunlaug.no/contents/wd_additions_12.html 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] Star-html hack in IE7
Cristian Palmas wrote: Hi, What are the problems with the star hack into IE7? Must I use conditional comments or there are other ways? I hope so... Thanks in advance. For IE7 specifically, the star HTML hack can still be done, but with a + symbol, as in * + html. - HP __ 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] font vs. font-size in firefox
is there anything buggy about the way firefox reads these that i should know about? i'm getting some weird results. -- Vincent Pollard http://www.ithinkx.co.uk __ 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] z-index/stacking context problem with relative/absolute positioned elements in Firefox 2?
On Wed, Apr 2, 2008 at 5:24 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Morgan Aldridge wrote:
http://images.smalldog.com/stacking_context_test.xhtml
Anyway, delete...
#sidebar{overflow: hidden;}
...and the stacking will be fine across browser-land.
Excellent, that did the trick. So I take it that it is/was a bug in
Firefox 2 with the way it handles z-indexes of absolute positioned
elements which are children of elements with hidden overflows? Messes
it up in the stacking context somehow?
Many thanks for the quick easy solution.
Morgan Aldridge
---
[EMAIL PROTECTED]
http://www.makkintosshu.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] font vs. font-size in firefox
On 4/4/08, vincent pollard [EMAIL PROTECTED] wrote: is there anything buggy about the way firefox reads these that i should know about? i'm getting some weird results. By font do you mean the font element in HTML, or the css shorthand property? http://www.w3.org/TR/REC-CSS21/fonts.html#propdef-font If the latter, the values have to be in a specific order: Value:[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] Firefox might be being stricter about this than IE. -- 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 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] font vs. font-size in firefox
hey richard, yeah i mean the css for declaring all the properties at once. http://www.w3schools.com/css/css_font.asp i'm wondering that when you use this if you need to declare all values? ie sems to let you declare some but is it correct to put the values for all the properties, eg. font: normal normal bold 12px arial rather than: font: bold 12px arial vince On 03/04/2008, Richard Grevers [EMAIL PROTECTED] wrote: On 4/4/08, vincent pollard [EMAIL PROTECTED] wrote: is there anything buggy about the way firefox reads these that i should know about? i'm getting some weird results. By font do you mean the font element in HTML, or the css shorthand property? http://www.w3.org/TR/REC-CSS21/fonts.html#propdef-font If the latter, the values have to be in a specific order: Value:[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] Firefox might be being stricter about this than IE. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz -- Vincent Pollard http://www.ithinkx.co.uk __ 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] Left nav bar is cut off on IE6
Farid Jamea wrote: But that particular line is the exact fix that you suggested to me when I asked a different question about two months ago :-) What works depends on what it's supposed to work in/with. The fix could only work when the right section is as tall or taller than the left section, which were the conditions I served the fix for two months ago. Once you change the conditions you'll also have to consider modifying any and all fixes. That is why it is important to not only add a fix, but also to figure out how, why and under which conditions it works. 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] FF and IE problems
Andrew Doades wrote:
In my css file:
#sidebar {
float:left;
width:165px;
border: 3px solid #aaa;
background-color: #eee;
margin:2px;
padding: 1em;
}
#content-main {
float:none;
width:100%;
}
then in my template I just put that links and that in a div id=sidebar
and a content-main one for content
As Alan Baker said we need to see some working code to truly be correct.
This css.
#content-main {
float:none;
width:100%; /* hasLayout trigger */
}
Is simply.
#content-main {}
Since a div is always 100% of it containing block [1] when in normal
flow [2]. What you are seeing in IE5, IE6 or IE7 is I think the affects
of hasLayout [3]. Remove the width:100% from #content-main and IE should
behave itself.
[1] http://www.w3.org/TR/CSS21/visuren.html#containing-block
[2] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3] http://www.satzansatz.de/cssd/onhavinglayout.html
Alan
http://css-class.com/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/
Re: [css-d] FF and IE problems
Nope, I removed that width control from the css but still IE is refusing
to show it correctly, I did use FireBug in FireFox to check this out and
FireBug seems to agree that it's ok!
Is this an IE problem, like the Microsoft way to be a pain, or am I
missing something!?
Alan Gresley wrote:
Andrew Doades wrote:
In my css file:
#sidebar {
float:left;
width:165px;
border: 3px solid #aaa;
background-color: #eee;
margin:2px;
padding: 1em;
}
#content-main {
float:none;
width:100%;
}
then in my template I just put that links and that in a div id=sidebar
and a content-main one for content
As Alan Baker said we need to see some working code to truly be correct.
This css.
#content-main {
float:none;
width:100%; /* hasLayout trigger */
}
Is simply.
#content-main {}
Since a div is always 100% of it containing block [1] when in normal
flow [2]. What you are seeing in IE5, IE6 or IE7 is I think the affects
of hasLayout [3]. Remove the width:100% from #content-main and IE should
behave itself.
[1] http://www.w3.org/TR/CSS21/visuren.html#containing-block
[2] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3] http://www.satzansatz.de/cssd/onhavinglayout.html
Alan
http://css-class.com/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-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] FF and IE problems
Nope, I removed that width control from the css but still IE is refusing
to show it correctly, I did use FireBug in FireFox to check this out and
FireBug seems to agree that it's ok!
Is this an IE problem, like the Microsoft way to be a pain, or am I
missing something!?
BTW, Alan when I send mail to you, I get it bounced back with some
random error!
Alan Gresley wrote:
Andrew Doades wrote:
In my css file:
#sidebar {
float:left;
width:165px;
border: 3px solid #aaa;
background-color: #eee;
margin:2px;
padding: 1em;
}
#content-main {
float:none;
width:100%;
}
then in my template I just put that links and that in a div id=sidebar
and a content-main one for content
As Alan Baker said we need to see some working code to truly be correct.
This css.
#content-main {
float:none;
width:100%; /* hasLayout trigger */
}
Is simply.
#content-main {}
Since a div is always 100% of it containing block [1] when in normal
flow [2]. What you are seeing in IE5, IE6 or IE7 is I think the affects
of hasLayout [3]. Remove the width:100% from #content-main and IE should
behave itself.
[1] http://www.w3.org/TR/CSS21/visuren.html#containing-block
[2] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3] http://www.satzansatz.de/cssd/onhavinglayout.html
Alan
http://css-class.com/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-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] z-index/stacking context problem with relative/absolute positioned elements in Firefox 2?
Morgan Aldridge wrote: Excellent, that did the trick. So I take it that it is/was a bug in Firefox 2 with the way it handles z-indexes of absolute positioned elements which are children of elements with hidden overflows? Messes it up in the stacking context somehow? I wouldn't call it a bug unless I find some clear info/examples in the CSS standards that says that elements positioned absolute over the edge of a container with 'overflow: hidden' declared on it, should not be affected by that overflow-value at all. So far I only have the latest browser-versions' interpretation to go on, and that's not enough either way. Maybe someone has a pointer to a section in the latest CSS standards that can clear up this issue..? Apart from that: I found the 'overflow: hidden' potentially superfluous on a floating element, which is why I tested the effect it had in your case. I see many such butter on fat (over-styling) cases around, and I usually put them on a diet (deactivate unnecessary rules) at an early stage of debugging. Lots of apparent bugs tend to disappear in the process, and I only have to keep track of the dieting-process so the patient don't die of hunger :-) 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] FF and IE problems
Andrew Doades wrote: Nope, I removed that width control from the css but still IE is refusing to show it correctly, I did use FireBug in FireFox to check this out and FireBug seems to agree that it's ok! Without a link we have know idea what IE is doing. Which versions of IE are you referring to anyway? They will all show differences depending on the layout. I can give you plenty of reasons why IE misbehaves but a 1000 plus links will be a bit overwhelming. If you can't provide a link you need to explain in precise detail what IE? is not showing correctly. Alan http://css-class.com/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/
Re: [css-d] FF and IE problems
Sorry, I haven't time to wade through entire stylesheets tonight, but assuming
that your stylesheets don't do anything 'clever' with table definitions, it
looks as if your divs are wrapped by table/table tags which AFAIK would
follow each other in the HTML 'flow', so each table will appear below the last
regardless of the fact that you have no TRs and TDs defined. This would
invalidate your 'box model' flow styling.
I suggest dumping all TABLE definitions unless you are truly using a table
def for a real table, and use CSS to do all of your placement.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: Conn Artistes, UKShopsmiths, 2nd Touch AP Groups
Shopsmith 520 bits
Flatulus Antiquitus
- Original Message -
From: Andrew Doades
To: Alan K Baker
Cc: css-d@lists.css-discuss.org
Sent: Thursday, April 03, 2008 10:34 PM
Subject: Re: [css-d] FF and IE problems
In my css file:
#sidebar {
float:left;
width:165px;
border: 3px solid #aaa;
background-color: #eee;
margin:2px;
padding: 1em;
}
#content-main {
float:none;
width:100%;
}
then in my template I just put that links and that in a div id=sidebar
and a content-main one for content
__
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 ok in FF not in IE for toolbar?
I moved around a toolbar on a CMS template I have been working on with links
called HOME, TAGS, SEARCH, and FEED. I copied over the CSS code for the
toolbar section to my current CSS file and got it to work OK in firefox.
My problem is I do not see the graphical icons for HOME, TAGS, SEARCH, and
FEED links on IE but do see them on FIREFOX.
My demo link is: http://www.lemoslife.com/demokill See for yourself. The
links have icons in front of them in FF but not in IE. I have the snippet of
CSS code for that toolbar section listed below. I'm betting something is
crossed where it doesnt work in IE but does in everything else. Im just not
sure which is which. This exact code works in another version of a template
I have in both IE and FF but for the life of me I cant figure out what has
changed.
Would someone with more CSS experience be able to take a peek and see if
theres something not right?
/* MyBlog Toolbar Start*/
#myBlog-wrap #myBlog-toolbar ul, #myBlog-head ul {
padding-left: 5px;
position: absolute;
float:left;
bottom: 1px;
left: 0px;
}
#myBlog-wrap #myBlog-toolbar li {
list-style: none;
display: inline;
padding-bottom:2px;
padding-top:2px;
}
#myBlog-wrap #myBlog-toolbar li.toolbarHome {
background: url(../images/home.png) no-repeat;
}
#myBlog-wrap #myBlog-toolbar li.toolbarTags {
background: url('../images/tagcloud.png') no-repeat;
}
#myBlog-wrap #myBlog-toolbar li.toolbarSearch {
background: url('../images/search.png') no-repeat;
}
#myBlog-wrap #myBlog-toolbar li.toolbarFeed {
background: url('../images/feed-icon-16x16.gif') no-repeat;
}
#myBlog-wrap #myBlog-toolbar li a {
text-decoration: none;
padding: 20px 20px;
}
#myBlog-wrap li#blogActive a {
color: #D78102;
}
/* MyBlog Toolbar 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] Anchor tags
Hi all. I have a need for an entire index page to be contained within an anchor, so that anyone visiting the site would have to simply click anywhere within the page to bring up the next screen. As a tags can't contain divs , does anyone have a technique to achieve this? Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: Conn Artistes, UKShopsmiths, 2nd Touch AP Groups Shopsmith 520 bits Flatulus Antiquitus __ 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] FF and IE problems
Now that's what I call a useful resource. Amazing how these little gems appear just when you need them. Thanks Rahul. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: Conn Artistes, UKShopsmiths, 2nd Touch AP Groups Shopsmith 520 bits Flatulus Antiquitus - Original Message - From: Rahul Gonsalves To: Andrew Doades Cc: css-d@lists.css-discuss.org Sent: Thursday, April 03, 2008 7:08 PM Subject: Re: [css-d] FF and IE problems ..However, the numerous layouts available here [1] provide a stable base on which you may build - both two and three column layouts are available; fixed, fluid-width and many permutations thereof. Best, - Rahul. [1] http://blog.html.it/layoutgala/ __ 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] Opera 9, input type=file and text-indent
Boštjan Kern wrote: Hi all! I'll make this short and sweet: - browser: Opera 9+ - problem: text-indent doesn't work on input type=submit /, so I can't use a background-image to style it I'm out of ideas, but I'd rather not use input type=image. Any ideas guys (and gals)? You could try with button instead... Rafael. __ 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] font vs. font-size in firefox
On Apr 4, 2008, at 5:55 AM, vincent pollard wrote: yeah i mean the css for declaring all the properties at once. i'm wondering that when you use this if you need to declare all values? ie sems to let you declare some but is it correct to put the values for all the properties, eg. font: normal normal bold 12px arial rather than: font: bold 12px arial You don't need to declare all values. The values that are not specified will be (re-)set to their initial (default) values. font: 12px arial,sans-serif; will 'normal' font-weight, font-variant and font-style and 'normal' line-height (the keyword, in this case) Philippe --- Philippe Wittenbergh http://l-c-n.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] Anchor tags
Alan K Baker wrote: Hi all. I have a need for an entire index page to be contained within an anchor, so that anyone visiting the site would have to simply click anywhere within the page to bring up the next screen. As a tags can't contain divs , does anyone have a technique to achieve this? Yes: JavaScript. It has no meaning for all the content to be inside an A element, so you should do this by other means. Rafael. __ 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] space in horizontal nav
Hello,
I think I've seen a fix for this before but I can't find it right now.
I've got a mysterious space between li items in a horizontal nav bar. I
don't want to use floats because I would like the list to be centered on the
page. If anyone can help it would be appreciated.
Thanks,
Matt
My code is:
HTML
div id=nav
ul id=navlist
lia href=home.php
title=About UsAbout Us/li
lia href=services.php
title=ServicesServices/li
lia href=team.php
title=Meet the TeamMeet the Team/li
lia href=news.php
title=In the NewsNews/li
lia href=careers.php
title=CareersCareers/li
li id=activea
href=contribute.php title=ContributeContribute/li
/ul
/div
CSS
#nav ul {
text-align: center;
padding: 5px 0;
margin-top: 0;
background-color: #036;
color: white;
width: 100%;
line-height: 18px;
}
#nav ul li {
display: inline;
border: 1px solid red;
}
#nav ul li a {
padding: 5px 10px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
#nav ul li a:hover {
background-color: #369;
color: white;
}
#nav #active {
border-left: 1px solid #fff;
}
__
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] space in horizontal nav
Matt, If the issue is only showing up in IE, try removing all the whitespace between the list items in the markup. - Kit __ 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 - display: none bug (with testcase)
G'day all, I've run into a bug that's (of course) only affecting IE6, but I'm interested to see if anyone else has a better fix for me. You can see the bug in action at http://www.iqmultimedia.com.au/kit/displaynonebug.html The test is a fixed-width container (with overflow:hidden) with four child elements (all set to float: left) of fixed width. One item is set to display: none. Despite IE not leaving any gap where that item is in the markup (between the two vertical grey columns), it determines that it cannot fit the green box into the remaining space. The bottom test shows the same markup but with 'display: none' replaced with 'width: 0'. The basic concept is that IE miscalculates the width of floated items with display: none set. If I set the width of the item to zero (with an overflow: hidden addition), the three items fit in the space perfectly in all tested browsers (IE6, Safari 3.1, Firefox 2+3, Opera 9). I'm using Javascript to set the display properties programmatically based on certain conditions in my real usage scenario. I can use the workaround, but it's much less clean. A quick Google shows others with the issue; none with this specific workaround, and no obvious alternative workaround. If someone knows of one, please, please let me know! Cheers, Kit Grose Frontend Web Developer iQmultimedia [EMAIL PROTECTED] iqmultimedia.com.au __ 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] space in horizontal nav
It is showing up in all browsers... -Original Message- From: Kit Grose [mailto:[EMAIL PROTECTED] Sent: Friday, April 04, 2008 12:26 AM To: Matt Tibbits Cc: css-d Subject: Re: [css-d] space in horizontal nav Matt, If the issue is only showing up in IE, try removing all the whitespace between the list items in the markup. - Kit __ NOD32 3001 (20080404) Information __ This message was checked by NOD32 antivirus system. http://www.eset.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] centering divs within divs / jumping columns
Hi CSS'ers . . .
I am still having trouble. How do I get the footer down underneath the
wrapper. The height of the body should be 412 px with the footer (CONTINUUM)
directly below.
URL
http://www.triviumwine.com/continuum_site/pages/vision.html
thanks.
--s
On Sun, Mar 30, 2008 at 11:52 PM, David Laakso [EMAIL PROTECTED]
wrote:
Stuart King wrote:
1.: http://www.triviumwine.com/continuum_site/pages/wine.html
http://www.triviumwine.com/continuum_site/pages/vintage.html
2. http://www.triviumwine.com/continuum_site/pages/vision.html
--s
Remember, not to forget, you've got two CSS files. And pages with
different markup for the same element.
1/
These must be in this order (lvha) in the CSS, to work (or color, if you
will) properly:
a:link{ color: red }/* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links*/
Your markup on that page reads p class=botmenu/p
but you have no CSS p.menu.
Add this to the CSS file and tweak the margin top to position it
p.botmenu {margin: 45px 0 0 0;}
2/
In my Mac OS X 10.4.11 the horizontal menu appears to be centered
horizontally (if that's what you mean) in the content division in the Mac
browsers you list; and, in same for XP IE/6.0. But then I do not own a pixel
ruler on either OS, and judge measurement visually. If you seek pixel
perfection, someone else can help.
If you want to center it, more or less, vertically tweak the margin top on
this selector:
#botmenu { margin: 20px 0 0 0;
}
If the font is too small adjust:
a:link {
font-size: 80%;
}
Reset the link order as above [1/].
As far as the font is concerned in IE, you get either Verdana or Arial
(trust me, there ain't gonna be anyone in their right mind running around to
make sure it is consistent to whether you're rendering Verdana or Helvetica
on their Mac with whatever they got on their pc).
From a pragmatic view, you're fine with the bottom nav set as you have it.
If you're into semantics, /perhaps/ it might be set as a horizontal list.
If stability is your bag, you may want to consider /all the text/, not
just the horizontal nav, is set on something that is static. Consequently,
with user discretion, the text shoots out the bottom and heads for South
America with font-scaling.
__
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] centering divs within divs / jumping columns
Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... __ 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] centering divs within divs / jumping columns
Stuart King wrote: I am probably not explaining myself. H ow do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) as the entire background with the footer underneath On Thu, Apr 3, 2008 at 9:44 PM, David Laakso [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... I don't know. When you reply, hit reply all, so that your question goes to the list, too. Then someone who understands your question will reply to it. -- 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/
Re: [css-d] centering divs within divs / jumping columns
Sorry . . . If I have a 2 column layout with a footer. The content background is 780px by 412px. How do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) example: http://www.triviumwine.com/continuum_site/pages/vision.html Underneath this - how do I place the footer. thank you. On Thu, Apr 3, 2008 at 10:00 PM, David Laakso [EMAIL PROTECTED] wrote: Stuart King wrote: I am probably not explaining myself. H ow do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) as the entire background with the footer underneath On Thu, Apr 3, 2008 at 9:44 PM, David Laakso [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... I don't know. When you reply, hit reply all, so that your question goes to the list, too. Then someone who understands your question will reply to it. -- 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/
