Hello everyone I am very new to CSS so I hope this will be easy I have a page that has some content a div that floats on the right and some links below. I have styled the links to look like buttons but the last button is not inline with the others in FF3.5 /opera 9/ safari but it does work in IE.

Can anyone help?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title>
<link rel="Stylesheet" href="Styles/Style.css" media="screen" />
</head>
<body>
    <form name="aspnetForm" method="post" action="Submit.aspx" id="aspnetForm"> 

    <div class="CompanyBlurb">
    <p>
    Lorem ipsum
    </p>
    <div class="actions">
        <a class="LinkButton" href="ContactUs.aspx">Contact us</a>
        <a class="LinkButton" href="MoreInformation.aspx">More information</a>
        <a class="LinkButton" href="Reporting.aspx">Reporting and management</a>
    </div>
    </div>  
</form>
</body>
</html>

CSS

.LinkButton a:hover {

background-color: #ccc;

}

.actions a:link, .actions a:visited {

 padding: 4px 8px 4px 8px;
border: solid 2px #ccc; 
 background-color: WhiteSmoke;
width: 150px;
display: inline-block;
 text-decoration: none;
height: 55px;

 margin-bottom: 10px;
margin-top: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;

}

Image

wonky buttons

7 answers

Alex Holt 341
3
points
This was chosen as the best answer

try changing the styles for the a tags to:

display: block;
float: left;

You might need to play with the margins on the left or right to get them to space out..

inline-block isn't supported by earlier IE anyhow.

Answered over 7 years ago by Alex Holt
2
points

damn, what was quick...

I was just about to say that!

display: inline-block isn't correct!

.actions a:link, .actions a:visited {

padding: 4px 8px 4px 8px; border: solid 2px #ccc; background-color: WhiteSmoke; width: 150px; display: block; float: left; text-align: center; text-decoration: none; height: 55px; margin: 10px 5px 10px 0;

}

Answered over 7 years ago by Mark Sayers
1
point

Actually "display: inline-block" is correct depending on your reasons for using it. The problem is that "inline-block" had not been supported in IE until IE8. I wonder what "div.actions" has for styles. The thing that "inline-block" can give you is vertical alignment, which you can't naturally get w/ other display properties. I agree with Alex with floating "display: block". Since you say that you are new to CSS you may want to read about clearing floats if you are new to using floats http://www.quirksmode.org/css/clearing.html

Answered over 7 years ago by Efficient Pixel
0
points

Like said before, it's easiest (and maybe even most logical) to put it in an (un)ordered list. I added some additional styling to Jens's code:

Html

<ul class="actions">
    <li><a class="LinkButton" href="ContactUs.aspx" title="Title goes here">Contact us</a></li>
    <li><a class="LinkButton" href="MoreInformation.aspx" title="Title goes here">More information</a></li>
    <li><a class="LinkButton" href="Reporting.aspx" title="Title goes here">Reporting and management</a></li>
</ul>

css

.actions {
   overflow: hidden; /* or " auto", collapse float fix */
}

.actions li {
  display:inline; /* No need to float this to get it inline -- This puts the list items next to eachother */
}

.actions li a {
/* As you want the links to look like "buttons" we'll style the anchors instead of the list items, this causes the entire button to be clickable */

  display:block; 
  float:left; /* Causes the block elements to float next to eachother instead of underneath */    
  padding:15px 25px; /* The clickable area -- you could add a width & height if you want precision (e.g. when working with image backgrounds) */
  border: solid 2px #ccc;
  background:#efefef; /* It's best practice to you hexadecimal colors instead of the named ones */
}

I hope any of this made sense.

Answered over 7 years ago by Jesse Vlasveld
0
points

I'd say it would be easier to use a list for the links and float all of the list items, "stack them horisontally", like so:

 <ul class="actions">
            <li><a href="ContactUs.aspx">Contact us</a></li>
            <li><a href="MoreInformation.aspx">More information</a></li>
            <li><a href="Reporting.aspx">Reporting and management</a></li>
  </ul>

And the CSS...

.actions {
   overflow: hidden; /* or " auto", collapse float fix */
}

.actions li {
  float: left;
}

.actions li a {
  /* whatever appearance you like */
}

Notice that the display:block isn't needed when using float: left because float:left makes the element a float box and is thus already treated as a block-element, only differance is that it's "shrink-wrapping" to fit the content inside.

Answered over 7 years ago by Jens Hedqvist
UnDash 23
0
points

Simply add the vertical-align property with a value of "top" to the following selectors: .actions a:link, .actions a:visited and the anchors will line up nicely!

And, by the way, I agree with Jens that you should mark up the navigation as an unordered list.

Answered over 7 years ago by UnDash
Jakob 17
0
points

how about using an unordered-list ? reset the padding-left (FF uses 16px) and deactivate the list-style-type using float seams a little overkill if you don't want to have dynamic repositioning elements based on resizing the screen.

One of the good things with such lists is you can append pretty easy via DOM if you add an id and the layout should remain but i guess it's like always matter of taste.

Answered over 7 years ago by Jakob