Re: [css-d] Site check, please -- two small problems
See this Tom, http://htmlfixit.com/?p=1013 The advice there should fix your son of suckerfish issue I suspect. Don Second, I am using the son of Suckerfish menus. In Safari, when you move over a choice to reveal the submenu, things appear okay -- until you move onto one of the submenu's choices. Then the list item expands, showing more width to the right, and that extended area remains visible even after the submenu is closed. This must be a CSS error on my part, but I can't figure it out. __ 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] FW: Unwanted underlines on text (not links) in FF
Allison Bloodworth wrote:
Hi,
For some reason when I add the following to my css:
a:hover {
text-decoration: underline;
}
All my *text* (not just links) is underlined on mouseover in FF 1.5.0. This
is not happening in IE 7. The site where this is happening can be found
here: http://www.ischool.berkeley.edu/~allisonb/OHA/
And the stylesheet is here:
http://www.ischool.berkeley.edu/~allisonb/OHA/stylesheets/styles.css
p
a name=mainContent
OHA provides a cooperative in which the members can pursue their love of
riding and nature. It strives to support those members through mutual
respect and commitment.
/a
/p
since all of your content is inside an a tag ... it underlines as
requested.
Try this instead:
p
a name=mainContent/a
OHA provides a cooperative in which the members can pursue their love of
riding and nature. It strives to support those members through mutual
respect and commitment.
/p
Same problem through out your page.
Don
__
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] pdf link is linking to everything
Phil Turner wrote:
Help please Ive linked a pdf file to the brochure image, but its also
made the other images a link
and I cant get rid of the colour highlight on the links, its
obviously inheriting the default but I've written new link attributes
for the div and its not working
http://www.kruger.co.uk/davinci.html
urgent help needed, thanks in advance
I think it's the image, not the link ...
#rightcolumn img {
border: 0;
}
__
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] conditional comments
Jens Brueckmann wrote: Hi John, !--[if lte IE6] ![endif]-- shows at the top of the page on a white line. adding a space after the first two dashes and before the second double dashes should solve your problem. Cheers, jens !--[if lte IE 6] style type=text/css /style ![endif]-- Works for me. __ 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] problem with subemenus in drop menu (IE7)
The trigger for the dropdown is in the javascript, so the submenus are not positioned underneath the top level menu with CSS when hovered. Pure CSS based dropdown menus can now work in IE7 since it now honors the hover of any element. The element to make CSS dropdowns work when hovered is li element. The CSS you have is very convoluted and hard to follow but that's because it is auto generated. I would recommend the Sons of Suckerfish as an alternative. http://www.htmldog.com/articles/suckerfish/dropdowns/ Kind Regards, Alan A second on the son of suckerfish solution, but subject to fixing the sticky ie7 problem as explained here: http://htmlfixit.com/?p=1013 With the help of this list a week or two ago. __ 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] menu affect
Terry O'Leary wrote: HI Guys I'm wanting to produce a menu type affect that when a user rollsover a menu item an image slide out of the menu (similar to a drop down) I dont want this image to do anything just slide in and out of view depending o nthe hovering. Can anyone suggest a site that has implemented this affect (primarily in css) but flash or ajax would be fine! Not sure quite what you want Terry, but perhaps you can find your desired look by building off of one of these: http://www.cssplay.co.uk/menus/index.html __ 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 bug?
Shelly wrote:
I'm having an issue here I've never come across before.
I've got a site changed out from tables to XHTML Transitional/CSS. I
need a couple of conditional comments for teensy edits, but I'm having a
headache of a time.
If I set the conditional like so:
!-- if [IE]
stuff here
! [endif] --
(with or without spaces), then IE6 reads this fine, but IE7 completely
ignores it.
However, if I write it like this:
!if[IE]
stuff here
![endif]
(with or without spaces) then IE7 will apply the changes, but IE6 will
display ![endif] at the very top of all the pages.
Why is it doing this?
Hi Shelly,
I think you are using inproper syntax in any event.{1} {2} Try:
!--[if IE]
Don
{1} http://www.quirksmode.org/css/condcom.html
{2}
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
__
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] Web calendar
David Dorward wrote: On 04/04/07, Chris Rahe [EMAIL PROTECTED] wrote: I'm pretty new to css, table-less design but I'm trying to get up to speed quickly. I had to put a calendar on the web and I tried to come up with a useful way to do it using CSS and no tables. snip ... I suggest switching to use a table for your data structure. First it looks very nice! Second, it shows why you don't use overly descriptive terms for the classes and id's. Every day is classed Sunday. It makes no real difference, but still. Third, if you don't expect people to have styles off I suppose ... then do you worry about it? I think you may do well to experiment with the use of unordered lists or maybe even definition lists which may help with the issue that is mentioned there. I haven't thought about it at length, but I think it can be done. I presume you are dynamically going to generate this in the end? __ 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] horizontal LI menu doesn't work in FireFox
Tom Dell'Aringa wrote: Hi folks, I'm wanting to use a navigation bar similar to Simplebits.com - just a simple horizontal menu. It seems to work just fine in IE6 and IE7, but fails in Firefox (for a change). In Firefox, the UL seems to be collapsing, due to the fact that the LI and A's are floated. In IE it does not collapse. snip http://www.pixelmech.com/rev/tabs2.html Not seeing your issue Tom. It looks fine in FF 2.0.0.3 on my windows machine. __ 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] horizontal LI menu doesn't work in FireFox
Tom Dell'Aringa wrote:
Floating the containing DIV does not seem to help. How can I get UL in FF to
open up? You can see the test page at:
http://www.pixelmech.com/rev/tabs2.html
Oh, now I see you want it side to side 100% in essence?
Float the UL itself.
#navbar ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid #464a52;
background: #000; }
Then I think you will get the intended result in FF.
__
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] Pipe List
~davidLaakso wrote: Jim Nannery wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, Okay David, Version 2 of my faux pipe delimited unordered list menu [1] has one less hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and ff. I don't do mac often :-) The trade off? Well I class the first li and create a border-left: 0 rule for that classed li. Better? Worse? The beauty of the tabs in the NYT example is obviously that it works for all tabs because they have both left and right dividers. They also special class the active tab. They do not use pipes on the tabbed menu that I think you referred to. They did down lower in the jump to, that confused me at first as well until I grasped what you were referring to. I await colorful screen shots on the Mac 5.x platform :-) Don [1] Version 2: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php __ 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] Pipe List
Ian Young wrote:
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Ian Young
Sent: 03 April 2007 17:21
To: ~davidLaakso; CSS
Subject: Re: [css-d] Pipe List
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso
Sent: 03 April 2007 17:00
To: CSS
Subject: [css-d] Pipe List
Fat Erik 5s Simple Pipe List
http://css.maxdesign.com.au/listamatic/horizontal32.htm is
missing its
pipes in IE7.0.
Suggestions?
Thanks.
Best,
~dL
I commented out the border left stuff and it certainly works in
IE6/7 on my
machine.
Now that is not a solution, I know but I guess it is something in IE
hack
that is messing up IE7
Ian
Belay that folks. I now have double pipes in FF.
So obviously not the solution. :-
Well, IE7 doesn't recognize the star hack, so the ie specific comments
aren't reaching it. You need an ie7 hack ...
I think you can just use a conditional IE ...
I did it thus:
!--[if gte IE 7]
style type=text/css
/*IE workaround*/
/*All IE browsers*/
html #navlist li
{
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
/*Win IE browsers - hide from Mac IE\*/
html #navlist { height: 1%; }
html #navlist li
{
display: block;
float: left;
}
html #navlist li:first-child { border-left: 0; }
/*End hide*/
/style
![endif]--
But I think you can actually just make it if IE and remove the star hack
from the main style sheet altogether and be good. I don't have IE6
handy to test it.
__
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] Pipe List
Both of the conditional comment fixes you provided will work. No
question about that.
I had hoped (and should have written) to find a solution that would
/not/ require hacking IE7.0.
Anyone? Or is this a pipe dream?
Well you didn't say so David :-)
We hack ie6 in the existing solution, so why not ie7? It's a hack
solution to a problem -- that seems to work. If you just use one
conditional ie hack I think it works for both, so you aren't upping the
hack index. I think a non-hack true pipe solution is a pipe dream -- so
that should spur someone to a solution -- saying it cannot be done. The
reason I suggest this is that ie7 won't work if you simply remove all ie
specific code. In many cases I find that ie7 can work properly without
any hacks (not always pixel perfect, but often close enough), but it
appears that ie7 won't recognize:
#navlist li:before { content: | ; }
#navlist li:first-child:before { content: ; }
Here's one that apparently works all three ways in ie6, ie7 and in ff
using just borders ...
http://www.sitepoint.com/examples/pipe-delimiter/index.htm
Note that he is hiding the first pipe by using a negative left margin
even though it actually exists. One could of course argue that this
isn't a pipe solution at all, it is a border solution or faux pipe perhaps?
Don
__
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] Pipe List
snip Here's one that apparently works all three ways in ie6, ie7 and in ff using just borders ... http://www.sitepoint.com/examples/pipe-delimiter/index.htm Note that he is hiding the first pipe by using a negative left margin even though it actually exists. One could of course argue that this isn't a pipe solution at all, it is a border solution or faux pipe perhaps? Which leads me to this ... which appears to work everywhere ... faux pipe delimited list: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php Still fine tuning a bit ... but it works. __ 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] Conditional Comments: Help with order please in IE
I would use this: !--[if lt IE 6] link href=/css/ie55win.css rel=stylesheet type=text/css media=all / ![endif]-- !--[if IE 6] link href=/css/ie6win.css rel=stylesheet type=text/css media=all / ![endif]-- !--[if gt IE 6] link href=/css/ie7win.css rel=stylesheet type=text/css media=all / ![endif]-- Are you sure though that you really want to do this this way? Maintenance nightmare. Better to come up with a cross browser/version solution? __ 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] styling a ul
[EMAIL PROTECTED] wrote:
(Should I create a class to attach to the ul?)
The short answer is yes, but a better (longer) answer is you should
use an ID, since there's only likely to be one instance of it per page.
Thank you, so then it would be (for instance)
ul id=sub-menu-page class=sub-menu-page
li id=sub-menu-page class=sub-menu-page/li
/ul
and
.sub-menu-page {
border: none;
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
list-style-position: inside;
list-style-image: none;
} (or whatever styles I want)
and I would attach this class to both ul id=sub-menu-page
class=sub-menu-page and li id=sub-menu-page class=sub-menu-page, is this
correct?
thanks again, kd
Well sort of. You are using both a class and an ID. There may be times
when you want to, but in this instance probably not. If there will just
be one of these elements ever, then ID is appropriate.
So if you will only have one submenu ul, ever, then ID is the way to go
for the UL.
But if for example you may have a couple of ul submenus (one for each
category of menu links or something), then you want a class as there can
be more than one use of a class.
Conversely I presume you are using a list because you want to use
multiple li tags in it. So you would not give an id to that li tag as
you will have multiples, So you almost certainly want class and not id
for the li tag.
Then to style an id you use #elementname versus to style a class you use
.elementname.
You may also be able to simply refer to #sub-menu-page ul li {} to
address the li tag within the submenu li.
http://www.tizag.com/cssT/class.php
http://www.tizag.com/cssT/cssid.php
might be helpful for example.
Don
__
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] broken son of sucker fish menu
Ok so I managed to break it ... seems to work in ff just fine, but has a sticky problem in ie7. If you hover slowly right over the left/right divider, it will sometimes hang so that the hover pop-up doesn't disappear. http://ownersconnect.com/dev/index5.html I am obviously doing something wrong as this works: http://www.htmldog.com/articles/suckerfish/dropdowns/example/ Any help appreciated. Don __ 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] Help me with this mess
I use a nice text editor called notetab (there is a free light version
at http://notetab.com in addition to a low cost pro version) and it has
a utility clip that will find every image tag with a missing alt and
prompt you for the text to insert so that you can easily insert them.
If you have a lot to do, this is a good move as you should always have
alt tags. This is probably soon off topic, so if you want more on that,
write me off-list probably.
You will need this clip --
http://www.notetab.net/html/fixtags.htm
-- installed once you get notetab.
Don
snip
Tidy Online http://infohound.net/tidy/ will correct your (his) problem.
You will (he will) need to add alt's for each image like so:
img src=/clinical/images/page_white_delete.png title=Remove
onclick=alert('Remove'); alt= /
__
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 column width problem
The original site is www.a-wind-farm-too-far.com
The new page is www.a-wind-farm-too-far.com/indexnew.htm
The original layout has a column ('sidebar') floated right with the main
content in 'maincol' inside 'container' which is floated left.
The new layout has added 'infobar' inside 'container' and floated left
with a left margin on 'maincol' to make space for it. This works in
Opera and Firefox but in IE 'maincol' is displaced below 'infobar'.
This is very typical! It happens with most designs that are tighly
assembled and it is caused by differences in how ie6 calculates
dimensions. As usual, allow for padding and margin differences, add an
ie 6.x only stylesheet and hum merrily on your way. You almost always
need to reduce the column width of either infobar or maincol inside of
container for it to work. The reason it drops one below is that the
contents are too wide for the container by it's math.
I personally put my special ie only rules in conditionals like these
nowadays (top one for 6 and below and bottom one for 7 and above if needed):
!--[if lt IE 7]
style type=text/css media=screen
/* ie 6- stuff in here */
/style
![endif]--
!--[if gt IE 6]
style type=text/css media=screen
/* ie 7+ stuff in here */
/style
![endif]--
I have discontinued my use of the * and other similiar hacks.
Don
__
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] gabs in my header
shawn a wrote:
http://briandchandler.com/shawn/tara/
Firefox: 2 gaps. one gab above the horizontal nav bar. 2 or 3 pixels
in height. And one below looking to be like 10px in height
IE: one gab above the horizontal nav bar. 2 or 3 pixels in height
You haven't given anything a height? Giving the proper elements a height
helps it for me in ff.
/*=header==*/
#header {
height: 80px;
/*===nav bar=*/
#header_nav {
height: 26px;
Next you need some empty space between your columns perhaps ...
__
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] Help with line spacing
Michelle Tarby wrote:
I'm hoping for some help or guidance with some text positioning issues
on a menu I'm working with. I'm struggling to get some space between
list items that wrap onto a second line (If I'm not explaining that
clearly, you can look at http://wwwdev.lemoyne.edu/academics/index.asp
and see how Registration Course Information runs right up above
Continuing Education without a space.
I'm not sure how to modify my style sheet:
.menu {
width:150px;
height:175px;
position:relative;
margin:0;
font-size:9px;
margin:10px;
z-index: 1500;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:148px;
height:30px;
text-align:left;
color:#fff;
background-image:url(/images_admission/spacer.gif);
line-height:15px;
overflow:hidden;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul {
display: none;
}
Or http://wwwdev.lemoyne.edu/css/academic_home.css if you want to take a
look at the whole thing. Nothing I've tried has worked, so I'm guessing
that I just haven't found the right mix of changes.
Thanks in advance for any suggestions!
Michelle
Michelle,
You have a TD attribute ... but not tables?
The footer menu is a few pixels short of the width.
Delete the set height from the menu list items:
height:30px;
Add bottom padding:
.menu ul li a, .menu ul li a:visited {
padding-bottom: 10px;
Check the right edge of that as it appears to me that your main menu
items are being hidden from the pop-up divisions.
Lose all uppercase attributes in css.
BODY, TD {
should be
body, td {
although I don't think you ever use the td ... so you could delete that
and the preceeding comma and space.
Don
__
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] removing underlines from images placed between anchor tags
for now i'm playing with the main CSS here: http://silvasonic.com/
temp/sandbox/css_test_00.html (the actual CSS is right on the file
for the time being). so here's my question:
how do i get rid of the underlining below the little calendar / clock
icon on hover? i've tried of sorts of rules, but the basic idea is
that an image, within the class .post_meta and placed between anchor
tags, should not have a bottom border (or even 'text-decoration').
i'd really appreciate any tips / pointers on how to control this.
.post_meta a:hover, .post_title a:active {
text-decoration: none;
}
If you do that the image and the other items will all lack a bottom
border/text decoration. The way I would do it is to create another
pseudo class for my image links vs my other links.
Don
__
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] Centre a Div
div id=everything/div
#everything{
position: relative;}
The learning curve for designing without tables is a steep one :)
Joanne
Not really Joanne,
It does take a minute, but once you get it you'll see it isn't that
difficult.
http://www.maxdesign.com.au/presentation/center/
__
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] Calling different navigation colours for different divs
Richard Brown wrote: Hi Is it possible to name different navigation colours for different divs please? The site in question is: http://www.theoldcoachworks.org.uk/rooms/ http://www.theoldcoachworks.org.uk/wp-content/themes/WordpressRooms/ style.css If you notice the bottom set of boxes are surrounded by a colour. What I would actually like to do is to get the colour to replace the inner light brown colour box but for the text to stay light brown itself? Any ideas please? Thanks. Sure Richard, Use link pseudo classes: http://www.w3schools.com/css/css_pseudo_classes.asp http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html Hint: keep them in the right order or it doesn't do what you expect ... Don __ 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] h1 bottom border missing in IE
Ann Adamcik wrote:
Hi there,
Could someone take a look at the header of this page and see what I'm doing
wrong?
In good browsers, the h1 at the top (Engaged Encounter) has a 1px teal
bottom border.
In IE, the bottom border doesn't show up. Any clues?
Page: http://indigopear.com/Clients/SFCEE
CSS: http://indigopear.com/Clients/SFCEE/style.css
Thanks!
-Ann
Someone smarter will give you a good answer. Meanwhile this appears to
work ...
#header h1 {
line-height: 60%;
margin-left: 70px;
padding-bottom: 5px;
font-size: 34px;
font-weight: normal;
border: 2px solid white;
border-bottom: 1px solid #3aa0ac;
}
At least in my local testing.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] how to specify mutiple selectors for a:link etc
I have this:
.header1, .header2, a:link {color: #881719; text-decoration: none;}
but that seems to treat it as:
.header1
.header2
a:link
I want it to be this:
.header1 a:link
.header2 a:link
Do I need to repeat the a:link part?
.header1 a:link, .header2 a:link {color: #881719; text-decoration: none;}
I am sure this is basic and yet I cannot find it.
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. __ 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] Navigation Woes
Richard Brown wrote:
I am trying to build a navigation for this site:
http://www.theoldcoachworks.org.uk/
Following up on my earlier answer where your menu was dropping ... it is
a total width issue that triggers the problem in ie6.
You can easily fix the width issue:
#sidebar{
/*width: 200px;*/
width: 180px;
}
I also added a text align to that in my example to make it match in ff
and ie.
Seems to fix the dropping menu ... I updated my demo:
http://bestfoot.com/temp/temp3.html
There is still a text jump that needs to be fixed on hover over the links.
__
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] Border-line Crazy
[EMAIL PROTECTED] wrote:
So, I'm trying to make a dashed bottom border for IE6-Win2K
(captive audience). It won't do it. I know dotted appears as
dashed in IE (at least that is what I read), but dashed is just
appearing as a solid line. The relevant code (I think) is
below (a little Java is included for completeness, just in
case that's what's screwing me up).
table {
border:none;
border-collapse:collapse;
font-size:100%;
margin:0;
width:800px;
}
thead th {
border-right:none;
background:#900;
color:#fff;
}
th {
border-right:1px #900 solid;
padding:0 .5em;
}
.topLevelHeading {
border-bottom:1px dashed #fff;
}
thead
tr
th/th
th/th
th/th
th class=topLevelHeading colspan=3Manah Manah/th
th/th
th class=topLevelHeading colspan=2Do doo de doo
doo/th
/tr
tr
thManah/th
thManah/th
th id=ownershipDoo/th
thDoo/th
thDoo/th
thDoo/th
thManah Manah/th
thDo doo de doo doo de doo doo/th
%if(refinance.equalsIgnoreCase(5)) {%
thde doo doo /th
% } else {%
thde doo doo doo doo doo doo doo doo doo/th
% } %
/tr
/thead
TIA,
Well I would start by putting table tags on the table ;-)
The java would not be messing anything up ... so that isn't helpful at
all. What could be messing things up is the output of the java, but I
don't think so. It appears to me that the output is either header a or
header b... if refinance is 5, then you get de doo doo, otherwise de doo
doo doo doo ... it doesn't matter if the syntax of the output is correct.
As you point out, dashed is really a solid line when displayed in ie6,
but is dashed in ff.
The fix to my knowledge is to use a dotted image as shown here for
example: http://bestfoot.com/temp/temp2.html
I admit I ripped off the dotted.gif (
http://bestfoot.com/temp/dotted.gif ) somewhere ... and I don't remember
where, but I would make my own anyway if I was going to use the technique.
__
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] Table widths not the same with image in td
Scott Haneda wrote: http://newgeo.com/web/css/wide.html Top table, has an image in it 728px wide, with a 3px border Bottom table is the same spec, but no image, yet it is narrower. This seems to happen in Safari and FF on the mac, I can not test other browsers. How can I make the bottom table match up to the top one? Scott, you either need to make the image narrower by 6 pixels (the 3px border left and right take the cell beyond the 728 width allowed) or make the table wider by 6 pixels. All block-level elements also have the properties width and height. The margins, borders and padding you add to each element are then added on to these dimensions. [1] This all begs the question: why are you using tables anyway? http://www.yourhtmlsource.com/stylesheets/cssspacing.html __ 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] Arrangement Attempt
nouhad wrote:
Hello again :)
Here http://nouhad.technat.org/2square/Re-done/index2.html is how the page
looks after I applied my CSS Coding to it.
CSS Source can be found here http://www.shortText.com/ve5f.
HTML Source can be found here http://www.shortText.com/a6mw.
My mock-up can be found
herehttp://img208.imageshack.us/img208/6393/compo1he.png
.
Add a couple of div's to contain the rows of content so to speak.
#contentmidwrap{
width: 100%
}
#contentlowerwrap{
width: 100%
}
and then float left the two columns in each of these
As regards the other, find one of the liquid rounded corner sites[1] and
use that for the boxes with rounded corners, and then float the images
(like the sticky on that).
[1] http://www.cssplay.co.uk/boxes/krazy.html
__
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] building page with 100% divs
Dear Georg, David and list,
Thank you for your help! I have read carefully both of your emails and
visited the pages recommended by both. I need my solution to work in
Safari eventually, so I used the latter of the solutions suggested in
David's reference page and did most of what Georg said as well.
First two pages for history on the thread:
First: http://bestfoot.com/dummy/test001.html
Second: http://bestfoot.com/dummy/test002.html
html {height: 100%;}
I did that ... helped significantly!
I suppose what I am going to want next is min-height rather than
restricted maximum height as you anticipated below. I did add the
display: table; Where is there a good resource on display: [property]
as I really want to get my head around that better. I have to admit I
use them regularly without comprehending fully why and/or if I should.
Adding...
#bgwrapper{display: table;}
...will overcome that restriction in the good browsers
I added the next div called #wrapper to the mix. That is intended to be
the main page container for the page. As you see, I want have it on the
left edge of the #bgwrapper div so that the right edge of the gradient
is hanging out on the right. I also want to stop it about 80px short of
the bottom of #bgwrapper, so I added bottom padding to bgwrapper.
It never occurred to me that the paragraph block was causing my problem.
I actually took that out at this point and just left the filler text
without paragraphs for the moment.
I think I am making progress.
http://bestfoot.com/dummy/test003.html
I added bg color and borders to that just for reference, those will get
removed shortly as I don't really want them in there.
I will now go on to the next step and that is to add two headers (one
without background and one with background image. I will then
essentially create three columns in the body of the page.
http://bestfoot.com/dummy/test004.html
How do I get the right sidebar background all the way to the bottom of
the page? How do I get the middle column to have a height = 100% of the
right sidebar? Would containing them both in another div do it? Is it
bad to float all three side by side like that? Am I about to have a
float clear problem?
Thanks for the help so far! You are helping me understand these
concepts and I appreciate it.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] building page with 100% divs
I am trying to build a page ... with little current success. Every
time I think I have it, it doesn't work.
I want this:
1. a background image for the whole page
html{
background-image: url(bgtile.gif);
background-repeat: repeat;
}
2. a body ...
body {
margin: 0px 0px 0px 0px;
border: none;
padding: 0px 0px 0px 0px;
height: 100%;
}
Will that confine my body to 100% of the view port? It seems to scroll
even though I have it specified that way.
3. an outside wrapper that has a second background image in it ...
#outside_wrapper{
background-image: url(wrapperbg.jpg);
background-repeat: repeat-y;
background-position: right top;
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
}
Problem, I cannot get this wrapperbg.jpg to go to the bottom of the
page. I have some left floated columns (after a header) and it doesn't
seem to repeat. I have tried adding a second wrapper outside of that
one superwrapper and then tried floating the outside wrapper inside of
that for example ... doesn't work. I have tired putting
div class=clear: both/div!-- clearboth --
just before the end of each div.
Where are the good resources for getting a grip on such issues?
I don't really have a clean site to refer to at this time as this is a
project for someone else and I have their images on that site and cannot
share them.
Thank you in advance.
Don
__
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] building page with 100% divs
Don - HtmlFixIt.com wrote: I am trying to build a page ... with little current success. Every time I think I have it, it doesn't work. I decided that was a bit obtuse ... so let me see if I can build my page one step at a time and get feedback. Step one is here: http://bestfoot.com/dummy/test001.html Question: why does my blue gradient not extend from top to bottom of page? There is a margin both top and bottom. Where is that coming from? As near as I can figure it is the width of the scroll arrow at the top and bottom. If I add overflow:hidden it runs top to bottom in ff, but not in ie7 (I'll worry about ie6 later), it works in ff (the overflow isn't hidden ... there is a scroll bar) but in ie7, it chops off the extra content. Last if you go to: http://bestfoot.com/dummy/test002.html you will find that it doesn't stretch at all if there is insufficient content. Tomorrow I may try to put a couple of div's inside of that. I want the blue gradient to go top to bottom in all cases, period. I cannot put it on the body div btw because I want it to be the right edge of an 800 px wide content column. Thanks in advance. __ 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/
