17 replies [Last post]
bronxrick
bronxrick's picture
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2007-03-28
Posts: 7
Points: 0

I am trying to create a tableless form. I can pretty much get the form elements (text fields) and titles to line up kind of like you can get in a table.

The issue I am having is with the buttons. I am not using traditional buttons as I would like to be able to re-use this code on different forms. I can't use input type buttons or input type images, so I am using DIVs and would like to continue to use DIVs or SPANs at least for the buttons.

Three buttons, images are defined in styles. I would like to get it right justified in a containing DIV, which is dashed for viewing purposes. I would also like to get a rollover effect on the buttons.

Issue 1 - Buttons do not appear in Firefox 2.0.0.3 ... they DO appear in IE 6+. Would like them to appear in both.

Issue 2 - Rollover does not work as I thought it would (onMouseOver/onMouseOut, or hover in IE) in either browser (IE or FF).

Attached is the code in one page with the styles and the button bar.

All help will be greatly appreciated !!!
Thanks in advance !!!

Buttons

Previous

Next >

Cancel

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some notes: cursor: hand ->

some notes:
cursor: hand -> cursor: pointer
background-position: 0px top -> background-position: 0px 0px

onmouseover="this.src='bla'" -> onmouseover="this.style.backgroundImage='url(images/button_bla)';"

with the display: none; at the end of the style you hide the P-elements within the buttondivs.

check these things first.

As a rule, I never touch anything more sophisticated and delicate than myself

bronxrick
bronxrick's picture
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2007-03-28
Posts: 7
Points: 0

re: some notes: cursor: hand ->

Thanks Desdinova for those items.

  • using cursor: pointer instead of hand.
  • Mouseovers now work in IE !!!
  • not sure what background-position: 0px 0px did (no visible change in IE).
  • "with the display: none; at the end of the style you hide the P-elements within the buttondivs." - This is intentional, I wanted something to show in case the css wasn't called properly, but not show if the css was called.
  • Firefox still doesn't show though.

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 40 weeks 6 days ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    You, er, might want to get a

    You, er, might want to get a doctype?

    /awaits "what's a doctype"

    Verschwindende wrote:
    • CSS doesn't make pies

    bronxrick
    bronxrick's picture
    Offline
    newbie
    Last seen: 15 years 45 weeks ago
    Joined: 2007-03-28
    Posts: 7
    Points: 0

    re: You, er, might want to get a

    I have added a doctype of ...
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    I tried a doctype of -- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" --
    and both IE and Firefox acted the same at that point, where neither showed the buttons.

    I will admit that I don't know too much about doctype. I think it tells the browser what version of HTML to use when rendering, though I really don't understand all the differences.

    I have added the above suggestions to get the following code so far ...

    Buttons

    < Previous

    Next >

    Cancel

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 4 years 13 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    bronxrick wrote:I have added

    bronxrick wrote:
    I have added a doctype of ...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    This is not a complete doctype. It isn't good enough.

    Quote:
    I tried a doctype of -- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> --
    and both IE and Firefox acted the same at that point, where neither showed the buttons.

    And this one is valid and full. Check the link in my sig.

    vinhboy
    vinhboy's picture
    Offline
    Enthusiast
    davis, ca
    Last seen: 14 years 20 weeks ago
    davis, ca
    Joined: 2006-12-21
    Posts: 257
    Points: 0

    i tried your code on my

    i tried your code on my computer. does not work in ie7 or firefox.

    you have your "buttons" display: inline; yet you dont have any content in them, so they collapse.

    take out display: inline;

    vinhboy
    vinhboy's picture
    Offline
    Enthusiast
    davis, ca
    Last seen: 14 years 20 weeks ago
    davis, ca
    Joined: 2006-12-21
    Posts: 257
    Points: 0

    your javascript works. so

    your javascript works.

    so to get your buttons to be next to each other use "float"

    bronxrick
    bronxrick's picture
    Offline
    newbie
    Last seen: 15 years 45 weeks ago
    Joined: 2007-03-28
    Posts: 7
    Points: 0

    re: bronxrick wrote:I have added

    I was just at A List Apart reading about doctypes Smile

    I have changed the doctype to -- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" --

    Now both IE and FF work in the same way, where they don't show the buttons at all, but at least they are consistent in what they are doing.

    Again, I appreciate all the help and all the steps to get through to the solution.

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 40 weeks 6 days ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    bronxrick wrote:Now both IE

    bronxrick wrote:
    Now both IE and FF work in the same way, where they don't show the buttons at all, but at least they are consistent in what they are doing.

    This is why it's so important for you to have one Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    bronxrick
    bronxrick's picture
    Offline
    newbie
    Last seen: 15 years 45 weeks ago
    Joined: 2007-03-28
    Posts: 7
    Points: 0

    re: your javascript works. so

    Thanks vinhboy !!!!

    I removed the display: inline and used floats.
    ** The buttons are now appearing in both IE and FF !!!!

    I had to create a containing div to float it the way I wanted (in order from left to right: previous button, spacer, next button, spacer, cancel button) while keeping the button divs in place.

    Thank you all for all your help in fixing this, you are the best!!!

    Below is the updated and final code for reference...

    Buttons

    < Previous

    Next >

    Cancel

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 40 weeks 6 days ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    That code is awfully

    That code is awfully bloated, and you shouldn't really be using spacers Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    bronxrick
    bronxrick's picture
    Offline
    newbie
    Last seen: 15 years 45 weeks ago
    Joined: 2007-03-28
    Posts: 7
    Points: 0

    re: That code is awfully

    thepineapplehead, I will take your advice and remove those spacers. I am accepting that I can do more and more with CSS and I thank you for reminding me of it Wink

    I removed the spacers and the spacer style, and added margins of 5 to the button styles to give me the space I need.

    This code below seems to work and I think it is better like this... I would say this section is probably resolved.

    Thanks again !!

    Buttons

    < Previous

    Next >

    Cancel

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 40 weeks 6 days ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    You can get rid of the

    You can get rid of the javascript mouseovers entirely, too.

    Look on www.alistapart.com for the "Sliding Doors of CSS" article, see if that gives you some pointers Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    bronxrick
    bronxrick's picture
    Offline
    newbie
    Last seen: 15 years 45 weeks ago
    Joined: 2007-03-28
    Posts: 7
    Points: 0

    re: You can get rid of the

    I am trying to do them without anchor tags, and mouseovers are the only way I know how to do it.

    I searched for different ways within css, such as ":hover" but I read that IE doesn't support hover for elements other than anchors.

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 10 years 9 weeks ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    exactly, that's why you use

    exactly, that's why you use anchors. Smile

    an anchor has display: inline; by default. setting it to display: block; will give you all the freedom of the world for styling it. however, block will also cause the elements to be dropped underneath each other, which isn't always what you want. that's why you use float. float always makes the element block-level, giving you the ability to style it as you see fit.

    this way you can use the :hover pseudo, _and_ you can style it exactly the same way as you did with the div's right now. Smile

    remove the P elements within (since P may not be within A) and set something like text-indent or font-indent (I can't remember) to -100px;, add overflow: hidden;. this should remove the text when the CSS is active, and should leave the text neatly within the anchor when CSS is disabled.

    As a rule, I never touch anything more sophisticated and delicate than myself

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 40 weeks 6 days ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    bronxrick wrote:I am trying

    bronxrick wrote:
    I am trying to do them without anchor tags

    Why? It's a link to the previous page, that's what anchors are for.

    Verschwindende wrote:
    • CSS doesn't make pies

    robo26
    Offline
    newbie
    Last seen: 14 years 42 weeks ago
    Timezone: GMT+1
    Joined: 2008-04-14
    Posts: 1
    Points: 0

    similar css problem in firefox

    can you guys have a look at www.atdeganwy.com? It works fine in IE but the buttons flicker like made and you have to click several times in Firefox to get the links to work