[css-d] Absolutely positioning an element in a parent with display:table-cell

[Rafael Holt]

Hello,

Today I discovered a discrepancy between Opera and Firefox regarding
display:table-cell. I tried to find some further info on the matter but
didn't get much further than something (which I can't find any more) which
said that the spec says that it's up to browser vendors whether table cells
can support position:absolute or not, and this css-d
threadwhere
Adam Kuehn says it's a Gecko bug.

It seems to be that if the spec is really that shabby with
display:table-cell, there's a recipe for future headaches once more and more
people start using display:table and friends. Opera will faithfully
absolutely position something within a div with display:table-cell, Firefox
won't and relegates the position to be relative to the next containing block
parent (as in the link above).

What do you think the standard behaviour should be and is the spec really
this unspecific about this issue?

Regards,

Rafael
__
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] Position:fixed - why relative to viewport and not containing block?

[Rafael Holt]

Oh dear, I messed up the URL, how embarrassing.

http://raffles.awardspace.com/G/melbourne/2/
__
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] Position:fixed - why relative to viewport and not containing block?

[Rafael Holt]

Zoe wrote:
> Users are used to things moving when you scroll, so I've never needed to
change that.

On 08/02/07, Barney Carroll <[EMAIL PROTECTED]> wrote:
>
> To be honest, I do see fixed elements as a bit of a flashy luxury - and
> something that is often used irresponsibly to create cumbersome designs.
> More than a few times I've considered finally pushing the boat out on
> this technique, only to realise a CSS2-only solution ended up more
> elegant.


This is true, I don't like it when things stray away from what I expect or
jump at me. However, now that IE7 supports it, I believe more and more
people will start to use it and so users will become more accustomed to it.
Whether it annoys them or not is another matter. If used properly, I do
think it has its benefits.

This is the URL: http://127.0.0.1/G/melbourne/1/
Please look at it in either Firefox or Opera 9 - it's buggy in everything
else since it's just an experiment for now, my CSS playpen so to speak.

You should be able to see something saying "NEXT" vertically at the bottom
right. There is also a 'PREV' one on the left if you set the number of
thumbs to something smaller (hover over 'settings'). Anyway, this tab has
position:fixed and is positioned relative to the bottom right.

If the viewport is big enough (such as when the thumbs are all on one line),
it appears below the cream-coloured area and into the grey bit, which is
unsightly. Ideally, I would position it from either the bottom of the cream
area or from the top of the thumbs' container (ul#thumbarray). And it stays
there upon scrolling. Just like in PPK's site.

I'm interested in your opinions. Cheers,

Rafael
__
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] Splitting a list into two columns

[Rafael Holt]

On 08/02/07, Seona Bellamy <[EMAIL PROTECTED]> wrote:
>
> Hi guys,
>
> Creating a sitemap for a client.


However, they also want ti split over two columns so that it doesn't end up
> just scrolling forever. Fair enough. However, since this is to plug into
> their CMS, I need to allow for a variable number of sections and
> sub-pages.
>
> I've had a search around, but so far all the examples I'm finding require
> knowing how many items are in each column or the height of each column. I
> have no way of knowing either.
>
> Is there a way of doing this that will allow the columns to stay more or
> less equal regrdless of how many items there are?


Hi,

There is a very nice method purely with CSS, but as usual it doesn't work in
IE (or Opera). It works in Mozilla and will do in the next release of
Safari. This is how to make it into two columns with mozilla with a 2 em gap
in between:

-moz-column-count:2;
-moz-column-gap:2em;

For Safari it's without the mozilla specific prefix (without the -moz-).

Other than that, I think it'll be very difficult to work out a way of doing
it like you want unless you resort to some javascript. This ALA article is a
good read and contains a link to a script you can use:
http://alistapart.com/articles/css3multicolumn

Rafael
__
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] Position:fixed - why relative to viewport and not containing block?

[Rafael Holt]

Zoe wrote:
> What you are asking for *is* absolute positioning -- positioning one div
> relative to another -- so why not just use absolute positioning? That
> will allow your div to move along with the other div when the browser is
> scrolled.

> Switch your fixed div to absolute and it will do what you want.

Barney wrote:

> I think what Rafael wants is for the object to be fixed compared to the
> viewport, but for its initial position to be determined in relation to
> its containing element, which could vary.
>
> I'm afraid you will need a combination of javascript and CSS for this,
> where javascript works out where the element should be positioned
> originally. PPK's blog achieves something similar with the navigation
> menus in the side colums, you might find your answers by looking at his
> code: http://www.quirksmode.org/blog/index.html
>

Yes, Barney knows what I mean. I feared I'd have to resort to JS and PPK's
blog is exactly what I had in mind. :)

However, I still wonder whether anyone thinks position:fixed would be more
useful in this sort of implementation (doesn't move when viewport is
scrolled, but is positioned relative to any containing block, not just the
viewport). Not that I'm trying to change anything, I just wonder if anyone
has come across a situation where this would have been useful.

Cheers,

Rafael
__
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] Position:fixed - why relative to viewport and not containing block?

[Rafael Holt]

Hello,

I currently have a very fluid layout and would like something to have
position:fixed but I want it to be 1em from the top of a certain div. The
position of this div from the top of the viewport varies depending on what
is above it. I realise it is impossible to have something fixed relative to
somewhere other than the viewport. Why is this? Why not make it behave like
absolute positioning but not allow it to scroll down with everything else?
This would make it much more flexible and useful and I foresee no problems
with it.

Any enlightenment on this matter is much appreciated. And of course, I must
ask, is it possible to do what I'm after without javascript? I doubt it...

Cheers,

Rafael
__
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] css popups

[Rafael Holt]

On 12/01/07, Andy Harrison <[EMAIL PROTECTED]> wrote:
>
> I'm trying to use some simple CSS-based popups.  Of the browsers I've
> tested
> it in, Firefox 1.5 works great, Opera 9 has trouble if I use a relative
> div
> with display:inline, and IE 6 doesn't work at all.  My test page is at
> test.dragonzreef.com/csspopuptest.asp.


Hi,

It doesn't work in IE6 because it doesn't support :hover on anything other
than anchors. Therefore, you would be advised to use an anchor, perhaps with
display:block to be able to give it dimensions, and relative position.
Inside it, the popup would be an absolutely positioned span, most likely
giving it block display is also necessary. This would probably work in Opera
9 too and if it's an anchor, it might also work if it's display:inline. Let
me know how it goes,

Rafael
__
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] (Argh!) Why does the text in my nested DIV vanish off the bottom of the screen?

[Rafael Holt]

On 09/01/07, Christian Kavanagh <[EMAIL PROTECTED]> wrote:
>
> It annoys me so:
> http://www.polarissc.com/csstest/directorlevelselling.html
>
> It's deadline day!  Any help will be gratefully received.


Hi,

Add this to .core:

margin-bottom:150px;

That' ll solve your problem. However, the big problem is that you're using a
horrible method with those images. That mirrored image should be a
background image inside .core and the clickable email link should not be a
part of it and an image map. It should be a separate image that you include
with an  tag and that you position in the right place (probably using
position:absolute and bottom:50px; right:20px; or something like that).

Hope this helps,

Rafael
__
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] Pitfalls of overflow

[Rafael Holt]

On 20/12/06, Barney Carroll <[EMAIL PROTECTED]> wrote:

>
> Hi Raf,
>
> This site is fantastic - there's loads of fantastic little bits of css
> here I'd like to pull apart. The overflow selector for the drop-down
> menu is very, very cool.
>
> Sadly this wouldn't work for me because I can't select the parent of a
> :hover element (besides, the flyouts are only revealed after the a -
> they're not hover-based), and in any case toggling the overflow would
> cause the page to become 3 pixels high.
>
> Regards,
> Barney


Hi Barney

I'm glad you liked it, I've been at it for a few weeks now. Unfortunately I
keep adding more complex CSS to it that only Firefox, Opera and Safari
understand and I fear the fix for IE6 is going to be a hell of a job! I'll
just have to add more classes and ids for it.

This is an area where I think CSS is quite deficient. The inability to
affect the parent of something like you say. Something like #item <
div:hover {color:red;} would be nice, and I've wanted it before (where <
selects the parent). Unfortunately it seems like you might have to resort to
javascript. You can't just apply :hover to the parent directly?

All the best,

Rafael
__
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] Ordered List Issue

[Rafael Holt]

On 19/12/06, Steve LaBadie <[EMAIL PROTECTED]> wrote:
>
> I have an unordered list with an image as the bullet and I want to nest
> an ordered list with decimals inside. The problem is the image is
> populating both list.


How about ?

Rafael
__
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] Pitfalls of overflow

[Rafael Holt]

On 19/12/06, Barney Carroll <[EMAIL PROTECTED]> wrote:
>
> I know this list isn't particularly keen on conceptual problems but I
> have this notion that I can't conceive of without overflow on a
> containing element which then comes round to bite me in the face.
>
> I have my two columns, navigation and content, side by side. The nav is
> meant to extend to however long the content is. I have achieved this by
> using the padding-bottom:(massive); margin-bottom:-(massive); and
> overflow:hidden; technique.
>
> However my navigation has a two-layer deep UL system whereby the site's
> main sections are listed downwards on the left hand of the nav column,
> and any li's deeper ul is absolutely positioned to just to the right of
> it, so my submenu drops down.
>
> I have only just realised I am in deed trouble because when my submenu
> gets large it will simply extend into nowhere.
>
> I'm under the impression that position:absolute within an
> overflow:hidden; are nails in both feet. I'm wondering if anyone's ever
> succeeded in this - I'm certain it must have been done at some point,
> both techniques (flyout submenus and extending faux-table-cell columns)
> are so common... Or am I chasing an impossible (or just ultra risky)
> dream?
>
> Regards,
> Barney


Hi,

I'm not sure exactly what you mean by nails in both feet, but I have a ul
within a div with overflow:hidden on a photo gallery I'm in the middle of
making. Go here  and change the
number of thumbs to something small like 2. Then hover your mouse over the
number after the word "page" (where it says page 1 of X showing images...).
That number is in a div and when you mouse over it, the ul appears (when the
div is hovered over, its overflow changes to visible). There is no
javascript there (but I've only tested it in FF2 so far and it won't work in
IE6 and probably not in IE7). I don't know if this is what you're after, but
it seems like it might be. Hope it helps,

Rafael
__
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] The clip property - what's the logic behind it?

[Rafael Holt]

Hi all,

I've been playing with clip recently and it seems to me the spec is a bit
counter-intuitive. It is particularly irritating if you are clipping
non-fixed width elements because if you don't want it to be clipped on the
right, you have to specify its width for that value. Surely it would be more
logical for each value to represent how much is clipped from that edge of
the rectangle? For example:

clip:rect(10px 100px 80px 20px);

If the element to be clipped is 100px x 80px, this will cause it to be
clipped to an area 70px x 80px, where it is clipped 10px at the top and 20px
on the left. This is fine, but why should it be necessary to specify 100px
for the right and 80px for the bottom? It seems to me it would be more
sensible for these values to be 0 to achieve this effect. It's easier to get
your head around.

Also, why is it that it applies only to absolutely positioned elements? Why
not relatively positioned ones?

Cheers,

Rafael
__
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 in floating a in tag

[Rafael Holt]

On 14/12/06, amir abbas <[EMAIL PROTECTED]> wrote:
>
>
> 1- all forums are in  tag and i have  tag in that  tag
> this  itself is contain two other  tag
>
> please see this part of code
>
> 
> 
> 
> {
> catrow.forumrow.FORUM_NAME} />
> {catrow.forumrow.FORUM_DESC}
> {catrow.forumrow.L_MODERATOR} {
> catrow.forumrow.MODERATORS} {catrow.forumrow.TOPICS} {L_TOPICS} -
> {
> catrow.forumrow.POSTS} {L_POSTS} - {catrow.forumrow.LAST_POST
> }
> 
> 
> 
> 
>
> now i want to float one of that  tag in right side of an  tag


Hi,

That should be easy enough. But it isn't floated at the moment. What you
should do is remove the div surrounding the span and give the span
display:block. Then float it right. And for this to work, you'll have to put
it before the forum name in the HTML. Also, don't use . Put the forum
name in a heading (h1, h4...). Your use of  for the forum description
isn't very semantic -  would be better suited. This will solve your
problem of using  and you can probably get rid of its parent div too,
it's unnecessary.

Also, instead of using   in your .stat span, you should use different
spans and separate them using margins.

I hope this is helpful,

Rafael
__
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 scrolling

[Rafael Holt]

On 04/12/06, Stephen Oravec <[EMAIL PROTECTED]> wrote:
>
> Is there any sites that scroll horizontal instead of vertical ?
>
> I tried one today just for the heck of it (had nothing better to do)
> and was wondering where I might find some more info on it .
>
> or if its really worth it.
>
> my example 


Hi,

I've come across a couple of sites that scroll horizontally, mostly photo
gallery kind of sites. Haven't got the links though. They are "ok" but still
somewhat annoying - horizontal scrolling is pretty much an absolute no-no
for me, unless it's for some cool effect that wouldn't be achievable
otherwise and only for prettiness' sake. If it's to achieve some sort of
function, then it's bad. You can't use the mouse wheel when scrolling
horizontally and it's unexpected and anything unexpected (like sound from
flash without you requesting it) is an annoyance.

In short: I'd say stay away from it.

Rafael
__
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] selecting all divs

[Rafael Holt]

On 27/11/06, Ross Hulford <[EMAIL PROTECTED]> wrote:
>
> What is the selector for all divs?


What do you mean? If you simply want to select all divs, do this:

div {border:1px solid red;}

It will give all divs a red border. The same goes for any element. The
selector for an element is the element's name.

Rafael
__
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] line-height issue with floated elements

[Rafael Holt]

Hi,

I have a div whose children (some spans and another div) are floated left
inside it. This is the site: http://raffles.awardspace.com/G/misc/

I am currently testing this in Firefox 1.5 only. It won't work in IE
(probably will in Opera and Safari).

Please select "custom" in the dropdown, enter a number less than 10 and
press the button (to create more than one page). If you hover over the
number after "page", you will see the ul containing links appear. The HTML:


  

  page
  

  1
  2


  
  of 2 showing the last lonely
image


   


In terms of semantic HTML it isn't ideal, but I'm just testing something
here. The problem is, the span containing the word "page" is one pixel
higher than the others. I think it's more a case of the others being one
pixel lower. It's the div's fault I think. This is the relevant CSS:

  #options form div {
display:inline;
vertical-align:middle;
  }
  #options form div:first-child > * {
float:left;
  }
  #options form div div,
  #options form div div ul {
position:relative;
  }
  #options form div div {
display:block;
line-height:1em;
height:1em;
overflow:hidden;
margin:0 0.4em;
z-index:2;
  }

If I give #options form div div a line-height of 1.1em and #options form
div:first-child > * a line-height of 0.9 em, they suddenly line up (not the
div, but that's easily solved). Why don't the spans line up? I'd rather not
have to faff about with line-height, which I don't really understand too
well and how it deals with inline elements mixed with block-level elements,
and when you make them floated - it gets complicated.


Thanks in advance,

Rafael
__
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] Floats for Form Labels -- vertical alignment

[Rafael Holt]

On 24/11/06, Stephan Wehner <[EMAIL PROTECTED]> wrote:
>
> I'm looking at the example for floating form labels  at
>
>   http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
>
> and I find the labels get shifted up by a tiny amount.
>
> In the "The original form" section the "Name" label is vertically
> centered with the respect to the input box.
>
> Under "Positioning the form with CSS" The "Name" label is shifted up
> with respect to the input box (this is easier to notice when typing in
> the field)


Hi,

I copied your exact HTML and CSS into a blank document and it shows up
nicely. When I type in the boxes, the text is nicely aligned with the label.
This is in FF1.5. Don't know about Safari. In the website you mention, the
text in the box appears below the label (that is, if they were underlined,
the lines would be broken up). However, if you are not happy with the way it
is, you can adjust the position of the label text by adding line-height:
1.4em to the input rules. Change the number to get it as you want. Hope this
helps,

Rafael
__
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] building css buttons

[Rafael Holt]

On 24/11/06, Mario Merino (gmail) <[EMAIL PROTECTED]> wrote:
>
> Hello I want to include several CSS buttons on a site Im building.  I have
> looked at the following article
>
> http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.sh
> tml but I would have to build the same amount of coded for each button I
> want to include, I implemented it and wasn't very convinced.


Hi,

What do you mean you have to build the same amount of  code for each button?
That CSS is applied to all the buttons, you don't need to do each button
separately. I have to say, though, those buttons are pretty ugly. Anyway, it
would be more helpful if you could better explain what you are trying to do
and why that example is unsuitable.

Rafael
__
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] Fixing images in place when using image substitution and text-indent

[Rafael Holt]

On 23/11/06, Graham Anderson <[EMAIL PROTECTED]> wrote:
>
> Hi
>
> I have a menu where all the menu button text is being replaced  with
> images.
> For some reason, when the browser text is resized, the "menu bar
> text" images begin to move tooshifting to the right with each resize
> 
> 
>  BRAVO PIZZERIA 
>  FERRARA CAFE  
>  BRAVO CUCINA   
> 
>  
>
>
> #header {
> position:absolute;
> width: 690px; height: 109px; margin: 5px 4px 5px 5px;
> background: url('../images/header.jpg') #957e4e;
> }
>
> #menu{
> position:absolute;
> left:0px;
> top: 83px;
> width: 100%;
> height: 25px;
> }
>
> #menu a{
> width:219px;
> height:25px;
> display:block;
> text-indent:9000em;
> background: url('../images/topbar_main_menu_nav_matrix.gif') no-
> repeat 0px 0px;
> }
>
> #pizzeria_topmenu_btn {position: absolute;left: 5px;}
> #pizzeria_topmenu_btn  a:link,  #pizzeria_topmenu_btn  a:visited
> { background-position:0px 0px; }
> #pizzeria_topmenu_btn a:hover, #pizzeria_topmenu_btn a:focus
> {background-position:0px -25px;}


Hello,

Some advice: Please abandon the idea of "this needs a container of some
sort, I'll put it in a div". It's also known nerdily as divitis. There are
other elements that are better suited to this sort of thing. For a menu like
yours, it's better to use an unordered list (). ul is block-level ( i.e.
default is display:block;) and so are the list elements inside (,
nothing else is allowed inside a ul). So for your menu, you can have this
HTML:



bravo pizzeria
http://www.ferraracafe.com/";>ferrara cafe
bravo
cucina

 

It's much cleaner and easier to follow I think. The second thing you should
also abandon is the idea of positioning everything absolutely. Absolute
positioning is OK if you intend to put everything in a fixed position, but
this makes it very restrictive. It means you will probably have to make your
page 800px wide and so it will look small for people with big screens.
Position:static is the default for everything and it's best to stick to this
unless you need to move something from its natural flow in the document. See
this excellent explanation if you want to read more:
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute

I'm assuming you want to make this menu horizontal (it's a bit difficult to
see what you're after without the images) so for that you can use this CSS.
It's a good idea to keep your header flexible (in width) to accommodate
different screen sizes.

#header {
margin: 5px 4px 5px 5px;
background: url('../images/header.jpg') #957e4e;
height:109px;
}
#header ul {
margin-top:83px;
}
#header ul li {
display:inline;
}
#header ul li a {
display:block;
width:219px;
height:25px;
background: url('../images/topbar_main_menu_nav_matrix.gif') no-repeat 0px
0px;
}

#header ul li a#pizzeria_topmenu_btn {
margin-left:5px; /* or perhaps padding is better here */
text-transform:uppercase;
}
#header ul li a#pizzeria_topmenu_btn:hover,
#header ul li a#pizzeria_topmenu_btn:focus {
background-position:0px -25px;
}

Besides all that, everything else in your CSS is redundant (except the
text-indent which I omitted. What is that for?). Also note that a and a:link
are practically the same thing and that it's best to use text-transform than
to have things in capital letters in your HTML - screen readers can
interpret that as shouting and if you turn CSS off it makes it look a bit
ugly. That's up to you though, of course.

Also, if you're thinking about what happens when the text is resized (which
is good) you should consider using ems instead of px. Using ems for
everything means that, for instance, a div with its dimensions in ems will
resize proportionally with the text and not stay the same size while the
text is getting bigger. This means your layout is less likely to break, you
respect the user's default font size choices and your site in general is
more flexible.

I hope this helped. Cheers,

Rafael
__
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] Problems dynamically styling DOM nodes in IE using Javascript

[Rafael Holt]

On 16/11/06, Wes Gamble <[EMAIL PROTECTED]> wrote:

>
> All,
>
> Does Element.setAttribute() work in IE?  Do I need to address the
> attributes
> differently perhaps?
>
> 
>
> newDiv = popup.document.createElement('div');
> newDiv.setAttribute ('id', 'pdf');
> newDiv.setAttribute('style', 'margin-top: 250px; text-align:
> center;');
> newDiv.innerHTML = 'Please wait while your forms are
> generated src="' + wait_image_url + '"/>';
> popup.document.body.appendChild(newDiv);


Hello Wes,

Yes, setAttribute works in IE, but the way to set styling for an element via
JS is not via setAttribute but like this:

newDiv = popup.document.createElement('div');
newDiv.setAttribute('id', 'pdf');
newDiv.style.marginTop = '250px';
newDiv.style.textAlign = 'center';
newDiv.innerHTML = 'Please wait while your forms are
generated';
popup.document.body.appendChild(newDiv);

Also, if you're using XHTML (seems like it since you're writing 
instead of ) you need to do everything in lowercase, i.e.  and
.

Rafael
__
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] tricky position

[Rafael Holt]

On 09/11/06, Adam Helweh <[EMAIL PROTECTED]> wrote:
>
> Hello all,
> I have only one snafu with this homepage design I have been working on.
>
> http://carlpritchard.secretsushi.com//homepage_template_dllist.html
>
> The "upcoming events" list needs to be designed so that the date and the
> associated event name need to be:
> 1.) associated with each other so that the CMS can add and remove them
> together as a pair
> 2.) They need to be able to move as one object so that when the date
> moves down, so does the event name.
>
> I believe I have those points solved, but I cannot seem to get the event
> names to be left aligned to the right of the date instead of wrapping
> underneath the date. Please see below for a text example.




It should look like this:
> 10/23   event name here
> Not like this:
> 10/23   event name
> here
>
> Any suggestions?
>
> Thanks in advance.
>
> Adam


Hi,

I'm assuming you want them like this:
date  event
date  event
date  event

In that case, there is no need to float them, which is what is causing your
problem. Since each item is in a div, they will each drop below each other
(you shouldn't be using divs though, it's unnecessary. An unordered list
would be better) as block-level elements do. Hope this is helpful,

Rafael
__
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] Spotlight On CSS - Search Engine

[Rafael Holt]

On 08/11/06, Ben Smith <[EMAIL PROTECTED]> wrote:
>
> Spotlight On CSS - http://www.spotlightoncss.com
> I've just created a CSS search engine which looks through a couple of
> hundred quality CSS sites at the moment - I want to keep developing
> it of course but would like to hear any feedback.


Hi,

The search function isn't working. I typed a few different CSS-related
things in and there's a flicker and no output. Also, you've misspelled
contributor. And I'd like to add brunildo.org/test/, he's a contributor to
this list and has lots of CSS experiments and tests on his page.
simon.html5.org also has a few.

I noticed Eric Meyer has started something similar using google's new custom
search engines: http://meyerweb.com/eric/thoughts/2006/10/24/css-search/

Good luck,

Rafael
__
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] Beginner needs help

[Rafael Holt]

On 09/11/06, Christopher Blake <[EMAIL PROTECTED]> wrote:

> 1. I want my page to sit centrally in the browser no matter whether
> the browser expands or contacts. Maybe some type of container that
> can contain my other elements?
> I have played around with % positioning but when 2 elements are next
> to each other and the browser resizes, so does the space between the
> elements. It's tricky because I will be using zindex to sit images,
> movies, text on top of each other. I just cannot figure this one out
> - any advice?
>
> 2. I can create divs & img with ids in html so that I can position
> them how I want in css. I can resize the imgs which is what I want to
> do for my boxes/background for text elements. but if I create divs
> and call the images in through my css sheet (which is what I want to
> do) it does not resize the image, just the container. My html isn't
> great at all and I am probably making a complete novice mistake here,
> but if you could help I would be very grateful.
>
> 3. I wanted a horizontal nav bar with a vertical drop down menu.
> Underneath the nav bar would sit a flash movie. Having read some of
> the other posts it seems that the flash movie 'comes out on top' of
> all your zindexes. Although it seems that some of the people have an
> answer for this I might just go for a horizontal drop down menu.
> Anybody point me in the right direction to help with this?



Hi,

1. Are you using absolute positioning? What do you mean by 5 positioning?
Absolute positioning should be avoided and used only when there is no other
way it can be done, since it isn't very flexible and as such is mostly
useful only where a layout is of fixed widths ( i.e. everything has a size
in pixels, for instance). To centre your page vertically, use #container
{margin:0 auto;} (or if you want, you can add margins for top and bottom
too). #container is whatever your page is sitting in, most likely a div. The
"auto" bit tells the browser to apply margins automatically, which
translates as in the middle. IE doesn't do this, so you should give the
parent element (the body most likely) text-align:center;. If you want the
gap between things to remain constant, make your containers flexible ( i.e.
width in % or not specified at all, i.e. auto) and make the margins between
them (the gaps) be of a fixed dimension, in pixels or even better in ems.

2. Why do you want to resize images in the browser? This means that people
are downloading larger images for no reason, because what they see is a
smaller image. This means a page that loads slower. If this image is
supposed to be the background for some text, then you are right that it
should be applied through CSS. Something like this is the way forward:
All your text goes here

p {background:url(image.png) #FFF;}

3. I don't know about flash movies, but here's a thought: put the flash
movie in a container with a z-index set to something less than your menu.
Maybe it will work. Be aware that z-index only works on things positioned
relative or absolute.

Hope this helps,

Rafael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Can't figure this out - Center a div with variable width

[Rafael Holt]

On 01/11/06, Mark Wheeler <[EMAIL PROTECTED]> wrote:
>
> Hi all,
>
> Is this even possible? (I'm sure it is, but I still feel pretty new
> to css) - Can you have a div (content) centered inside another div
> (container) BUT, the content div's width may be different because of
> content (thus you can't set the width) AND the div width must
> collapse around the content (so if a border was used, it would
> collapse around the content)? I can't figure this out. I'm sure there
> is a simple solution, but I can't seem to get there. Any help would
> be appreciative.
>
> Thanks,
>
> Mark


Yes, it's possible, but unless you want to get into some rather complex CSS,
the container has to have a fixed width.

#container {
  width:800px;
}
#content {
  margin:0 auto;
  border:2px solid red;
}

That will do what I think you're after. #content will stretch depending on
its content. Hope it helps,

Rafael
__
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] Alternating row colors in table?

[Rafael Holt]

On 28/10/06, Fred Janon <[EMAIL PROTECTED]> wrote:
>
> How to get alternating row colors in a table or a list?
>
> I know of solutions with Javascript but I am looking for something that
> would be done with CSS only, I don't want to have to have a class for
> the even rows (or odd). Now that we have CSS 2.1, with "counter" and
> "content", does anyone have an idea?
>
> Thanks
>
> Fred


Hi,

CSS3 adds support for this using the nth-child selector, but there is close
to no support for this so it is useless at the moment. Counter is not
supported well enough either, so it's not reliable to use yet. Short of
adding a class (which is how people generally go about this) or using
javascript, there is not much else you can do.

Why don't you want to add a class to the even/odd rows?

Rafael
__
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] declarations and embedded items

[Rafael Holt]

On 27/10/06, Ross Hulford <[EMAIL PROTECTED]> wrote:
>
> I have this.
>
>
> 
> 
>
> 
>  item 1
>  item2
>
> 
>
> 
>
> 
>
>
>
> what is the correct way to change the ul properties without effecting
> other properties.
>
> #header #holder #nav {
> }
>
>
> #header #holder #nav.ul {
> }
>
>
> #nav.ul {
> }
>
> #nav ul {
> }
>
>
> and what (if any). Is the difference between #nav.li and #nav li ?
>
>
> thanks,
>
>
> R.
>

An ID is unique, so adding #header and #holder before #nav (though you have
set the id as #mylist) is more specific, but redundant. I'm not sure what
you mean about not affecting other properties, but doing #nav { } or ul#nav
(assuming the ul's id is nav) is fine.

#nav ul will not work because that is saying "the ul which is a descendant
of the element with id 'nav' ".

#nav.li specifies an element with the id "nav" and the class "li" (it
doesn't point to a li element)

#nav li specifies the li children of an element with the id "nav" (which
would normally be a ul)

Hope this helps,

Rafael
__
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] nostalgia

[Rafael Holt]

Hello,

Please look at this page, where the area of focus is the blocks of
thumbnails: http://raffles.awardspace.com/G/g3.php?album=misc

The CSS is in this file: http://raffles.awardspace.com/G/g.css

As you can see, they are all floated left so that they appear next to each
other and should the line not have enough space, continue on a next line - a
bit like a table. They are all enclosed in div#thumbswrapper which is also
floated left at the moment and this in turn is inside div#thumbarray. I have
been trying to centre #thumbswrapper with respect to #thumbarray
unsuccessfully.

I realise this would be easy enough to achieve if #thumbswrapper had a fixed
width, thus making the number of thumb blocks per line also fixed. I would
like them to fill the width of the viewport and for their container to be
centred. I am not very hopeful that this is possible, but if any of you CSS
gurus out there can lend a helping hand, I would be most grateful. Even a
smattering of javascript would be OK as long as its failure is graceful in
browsers with JS turned off.

Cheers,

Rafael
__
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] Small issue with dynamic displaying of box

[Rafael Holt]

Hi,

I'm using some simple javascript to hide and then show a box using
document.getElementById('box').style.display. In Firefox it works perfectly,
but in IE the box appears in the main content area until you hover over it.

I'm pretty sure this isn't a javascript issue but more of an "IE is rubbish"
issue and that it's more to do with CSS and IE's quirkiness with floats.
Also perhaps something to do with the hierarchy of the elements and the
order in which they're rendered (just guessing here), because the box
(#albumlist) is floated left with a negative margin inside #wrapper.

Link: http://www2.union.ic.ac.uk/rcc/outdoor/malawi/s.html

Click on the "Get rid of this box" link on the left and then on the "I want
the box back!" link and you'll see what I mean. How can I solve this?

Cheers,

Rafael
__
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/