[css-d] Multipart hr styling
Work is continuing apace on the site I am working on:
http://homepage.ntlworld.com/graham.reeds/space
Sometimes I need to split the page into two or more logical blocks.
Naturally a horizontal rule would be the ideal divider for this.
However the current method uses three images to blend it in with the
border effect like so:
img
src=images/left_middlebar.jpg alt= width=54 height=22 /img
src=images/center_middlebar.jpg alt= width=691 height=22
/img
src=images/right_middlebar.jpg alt= width=55 height=22 /
Logically the ideal solution would to wrap a couple of spans around the
hr. That unfortunately causes validation to fail so div's are being
employed instead:
div class=page-splitter splitter-left
div class=splitter-right
hr /
/div
/div
A little CSS:
.page-splitter,
.page-splitter hr,
.splitter-left,
.splitter-right {
display: block;
height: 22px;
clear: both;
}
.page-splitter hr {
border: none;
margin-left: 54px;
margin-right: 55px;
background: #fff url(../images/center_middlebar.jpg) top left repeat-x;
}
.splitter-left,
.splitter-right {
width: 100%;
}
.splitter-left {
background: transparent url(../images/left_middlebar.jpg) left top
no-repeat;
}
.splitter-right {
background: transparent url(../images/right_middlebar.jpg) right top
no-repeat;
}
And the result can be seen halfway down:
http://homepage.ntlworld.com/graham.reeds/space/ (ignore the problem
with the adverts - I know they are broken). The bar works fine in
Windows FF and O8. Unfortunately IE6 is broken. The middle central bar
has a border and is lowered by around 10 pixels.
The fix suggested for IE on http://www.sovavsiti.cz/css/hr.html doesn't
actually work in this instance - my knowledge of CSS is limited so the
why's and wherefore's are beyond me - so I again turn to this list for
assistance.
Thanks, Graham Reeds.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Multipart hr styling
After posting I sat down and took the styling to pieces. This might
help someone else.
I started off with just the hr / tag inside a div that had a 'clear:
both' rule to stop it overwriting other elements.
Then I applied the styling rule of style and hide from [1]. A bit of
tweaking gave me a graphic from one side to the other with a gap for the
margin graphics. Nothing particularly special here. Time to add in the
left side. Wrapping that around the central div didn't cause any
problems so I added the right side graphic. Hey presto! - it worked.
Now I must of tried at least a dozen permutations to get this working
and this isn't particularly different from some of the others (I don't
have a history of attempts unfortunately) but I am glad it is working.
The CSS:
.content-pagesplitter {
clear: both; }
.content-pagesplitter-left {
background: transparent url(../images/left_middlebar.jpg) top left
no-repeat; }
.content-pagesplitter-right {
background: transparent url(../images/right_middlebar.jpg) top right
no-repeat; }
div.hr {
height: 22px;
margin-left: 54px;
margin-right: 55px;
background: transparent url(../images/center_middlebar.jpg) top
center repeat-x; }
div.hr hr {
display: none; }
and the source:
div class=content-pagesplitter
div class=content-pagesplitter-leftdiv
class=content-pagesplitter-right
div class=hrhr //div
/div/div
/div
[1] http://www.sovavsiti.cz/css/hr.html
Thanks, Graham Reeds.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index doesn't work with relative items in FF?
I've been looking at position and z-index in the specs. And I have a theory. However it doesn't seem right, but the facts seem to fit. I think that IE is painting the scene back to front like the painters algorithm, but FF paints the scene back to front by element branch. So the drop down is considered lower (it is drawn first) even though it has a higher z-index and thus get's overwritten by elements below it. I just wish I could figure out if a) FF is sticking to the letter of the W3C description (which is illogical) or b) FF is actually incorrect and IE is correct for once. It's like saying the car on the road which is about a mile away is closer than the pavement because the car is a child of the road where the pavement is a seperate element (poor analogy but the best I could come up with). The whole point of z-index is to determine the draw order of elements and to have the elements not actually relate to each other is illogical. G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] z-index doesn't work with relative items in FF?
Page: http://homepage.ntlworld.com/graham.reeds/space/ CSS: http://homepage.ntlworld.com/graham.reeds/space/styles/space_styles.css Platform: Windows Problem: The dropdown menus (#nav-...) appeared under the title graphic (#content-title). So I placed a z-index: 10 in the #nav which fixed the problem in IE. However in FF the dropdown menus still appear behind the title graphic. I have tried various combinations of positive and negative z-indices but nothing seems to work. However if you remove the postion: relative rule from the title graphic FF displays the menus correctly which leads me to believe that z-index not work on relative items in FF? Or is it that the menus positioning rules are conflicting with the title graphics? Any ideas for solutions? G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish blues (again)
Chris Akers wrote: http://homepage.ntlworld.com/graham.reeds/space Also, I noticed that #nav-rankings-option2a and #nav-rankings-option3a's background image jump up a pixel or two on hover. That is due to me not bothering with lining up the selection's properly. I can't decide whether the line under the link should line up with the bottom of the graphics text or just underneath that halfway between the options. Any ideas on that? Halfway between definitely. Also, why are you using blank LI's for the top and bottom? It seems you could just ditch those non-semantic items and make the first and last LI's larger to accommodate the background. There was a very good reason for doing that which escapes me at this moment in time. I think it was something to do with IE dropping the menu's if I didn't have it. Also the menu item would appear selected when the pointer was over the top of the border - an effect that looked wrong. Thanks, G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish blues (again)
Chris Akers wrote:
The original problem is the fact that I had to reduce the size of the
text via font-size: 1px to get it to render properly on IE6. To me
that seems rather hacky and I was wondering if there was any more
elegant way of achieving this.
Try
#nav li {
float: left;
overflow: hidden;
}
That should be less hacky. (If it works at all.)
That is definately less hacky and it works in IE6 and FF. Thank you.
Now I need to modify the graphics so that all menu tops are 5 (or 6) px
in height and create a couple of classes for top and bottom and then I
will be sorted (nearly).
Also, I noticed that #nav-rankings-option2a and
#nav-rankings-option3a's background image jump up a pixel or two on
hover.
That is due to me not bothering with lining up the selection's properly. I
can't decide whether the line under the link should line up with the bottom of
the graphics text or just underneath that halfway between the options. Any
ideas on that?
[OT]: Are there any lists similar to this that deal with JavaScript?
comp.lang.javascript[1] is a fairly good usenet group. There are a few
characters there that would rather critique your post format than
actually help or get into javascript holy wars with each other. But if
you can ignore them then it is a knowledgeable resource.
Thanks. I will check there. I am surprised that gmane doesn't have a
purely javascript group on here.
Thanks to all.
G.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Replicating tables and onion skinning gone crazy
When does using CSS become a more difficult way of replicating tables? The site I am overhauling use a fancy 'piping' graphic around most on screen items. I could simply create nicer tables than the original code which used proprietry attributes, I could position the images explicitly using inline styles or I could remove the images from the HTML into the css and use background images for it. However that would mean 8 background divs for each element that require the border effect - and there are 5 on this screen, one of which has a specialised corner (that contains the page type). I know what I have to do, but I am not happy about any of the three methods above. Is there any ideas that I might of missed? More annoying is that to replicate the layout I will have to use nested divs. I guess the savings on size will be worth it - the page is less than a fifth of the original page currently and I estimate it will be half the size of the original table happy design. Also there is some data on screen that is essentially a table. It has 3 columns and is tabulating some data, but is not a table in a regular sense (simply a rank, a link and a yes/no result). Should I use a table for this or a div-span-span-span layout? G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish blues (again)
css.student wrote:
what are the problems? All that I can see is that the link text is not
being hidden...anything else?
to hide the text, you'll need to edit the markup:
lia href=#blink/b/a/li
and the css, accordingly:
li a b {visibility:hidden;}
- CSS Student
On 10/31/05, Vicki Stebbins [EMAIL PROTECTED] wrote:
At 11:26 AM 31/10/2005, Graham Reeds wrote:
I have implemented a suckerfish menu for a redesign of a game site.
However every implementation I come up with works fine in FF and Opera8,
but fails in IE6 (only tested on Windows).
I also used the block image code which I was having trouble with last
week (thanks for the help).
The test site is here: http://homepage.ntlworld.com/graham.reeds/space
and the css is here
http://homepage.ntlworld.com/graham.reeds/space/styles/space_styles.css
...
Thanks, Graham Reeds.
Hi Graham,
I have to say I got so frustrated with the suckerfish menu I bought
Eric Meyer's Book 'More Eric Meyers on CSS' and implemented his menu (easy
and worked well), it also had how to do an image gallery which was perfect
for the job I was working on.
I was pointed to the book by Kev Adamson http://www.kevadamson.com, he had
used it in the sites he designed.
Regards
Vicki
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
The original problem is the fact that I had to reduce the size of the
text via font-size: 1px to get it to render properly on IE6. To me
that seems rather hacky and I was wondering if there was any more
elegant way of achieving this. If you look at the test page now it is
coming to life a lot more, and the menus work (or they should).
Also I have a problem in that when I upload the page to an actual site
and not the IIS that is on my local box the page is excrutiatingly slow
in IE6 yet smooth as silk in Opera and FF. Pop into the room next to
mine and it runs fine in his IE6. I think this is a IIS local-external
thing going on.
Also I have had another one of my friends test it on his Mac and it
works fine apparently.
[OT]: Are there any lists similar to this that deal with JavaScript? I
now have a couple of JS problems and my knowledge of JS is more limited
than my knowledge of CSS...
G.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Suckerfish blues (again)
I have implemented a suckerfish menu for a redesign of a game site. However every implementation I come up with works fine in FF and Opera8, but fails in IE6 (only tested on Windows). I also used the block image code which I was having trouble with last week (thanks for the help). The test site is here: http://homepage.ntlworld.com/graham.reeds/space and the css is here http://homepage.ntlworld.com/graham.reeds/space/styles/space_styles.css Originally I grouped all the menu images into one. This partially worked, but had problems with the items being differing heights: The items were between 13 and 21 pixels in size but the items were only partially selectable because the text doesn't fill it entirely. So I then thought about adding a top and bottom li for the menu border and making all the items in between the same size. However this causes the top (and the bottom) image to be drawn in correctly due to IE deciding that the size you want it be cannot be any smaller than the font-size (in this case around 10px). Add font-size: 5px to the top list-item and a similar one to the bottom and it starts to render correctly in IE, FF and O8. Now I am happy that it is rendering correctly, but am unhappy about the hack. Why does it do this and is there a cleaner work around? Also I have noticed that it is very slow updating when I am checking the site when hosted on my homepage. Does anyone else see this sluggishness in IE6? Any ideas on that as well? Thanks, Graham Reeds. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish blues (again)
Bill Gates wrote: I don't know whether you care or not, but it doesn't work right on OS X, Firefox or Opera. IE5.2 is hopeless, as well. On Oct 30, 2005, at 7:26 PM, Graham Reeds wrote: http://homepage.ntlworld.com/graham.reeds/space Is that on just the 'main' menu or you saying for all of them? Only the main menu has been implemented. No point in coding up the rest until I have one of them working. Really I would like a fix or a more elegant workaround for the font-size hack, and why IE6 is really slow compared to FF and Opera when the page is remote. Also do other people see it as being really slow. Also I don't really care about any browser less than a couple of years old, and IE5.x on both Mac and Windows is really a dying breed. For Mac I only really care about Safari, FF Opera, but I don't have access to a Mac for continuous testing, so I hope that FF and Opera will be like their Windows counterparts. Safari, I hope, will be quite compliant (it seems to be) so I hope the rendering will be similar to FF (and therefore work). Thanks, Graham. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish blues (again)
Linda H wrote: IE5.x on both Mac and Windows is really a dying breed. Don't I wish! Unfortunately, some 95% of the people accessing the site I'm working on are using IE and the people in charge don't take kindly to me telling the users they should download Firefox in response to complaints :-( Linda H Let me get this straight. 95% of people accessing your site use IE5.5 or less on both Windows and Mac, so the remaining 5% is distributed amongst IE6, FF, Opera, Safari, etc.? Last time I checked 95% of users used IE6 FF. The remaining 5% is distributed amongst IE5 (the most at around 3%) and Safari, Opera being the more significant of the others. G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ALA Sprite based menus issues
I have several drop down menus which have several items on each. In total that is 31 different options. Quite a bit of code went into making the onmouseover events work, and it doesn't quite work well in all browsers and it doesn't scale well (there is a lot of broken code in the js). The first part is suckerfish dropdowns which I got working fine. Then I decided since each menu has several options, using sprites ALA (http://www.alistapart.com/articles/sprites) would improve the situation no end and remove the nasty JS once and for all. Anyway I encountered some problems and thought it might be the dropdowns causing them so I have temporarily removed them and then I realised (or I think I have) my problem: I have an image called menu1.gif. This menu has 5 options in it. When you put they mouse over it they light up. Normally this would require 10 images, but now we are using just 1 and saving a potential 7 kb in size. This is good. Now the problem is when I try to set the :hover effects. The hover uses background images which can only have an offset from the original, which should allow me where to specify the new image from but it isn't working. It either shows nothing, or all items. I think this is because I am using multidimensional x rather than y like the article did. I thought about moving the image so they were above each other but that would cause the same problems. I would prefer to have a single large image for each menu but I can't see how I could do that. Now the only solution is to create a 31 images with their off and on states. and have seperate CSS code for each - something I would rather not do. Any ideas? Thanks, Graham Reeds. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ALA Sprite based menus issues
My description probably wasn't the best in the world so here's a link to some code that demonstrates my problem: http://homepage.ntlworld.com/graham.reeds/sprites/ Thanks, G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] page footer sliding between text
I'm having a spot of bother with my CSS. It seemed fairly straight
forward but nothing I have tried has sorted it. I'm fairly certain that
it is easily fixable but I haven't found a way and it is beginning to
annoy me. I've checked the last couple of months but the high volume on
the list makes it nigh impossible to see if someone has had a similar
problem to mine.
The problem: I have header with two columns below it followed by a
footer. Fairly standard.
There is a possibility that the two content columns can be larger than
the other so I have wrapped them both up in a container div, floated one
left, the other right with the footer beneath outside the containing div
like so:
#header { ...stuff... }
#content { width: 100%; }
#container1 { width: 470px; float: right; }
#container2 { width: 130px; float: left; }
#footer { width: 100%; }
However the footer div slides up between the two containers when it
should be positioned directly beneath the content.
I've tried setting the position and stuff but nothing gets it lined up -
I am missing a certain combination of rules but don't know what?
Any ideas?
Thanks, Graham Reeds.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
