CSS - Display: Block And Grouping Inconsistencies

I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed.

How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated!

I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari:
animalcrossingbay.net/cmps_index.php

I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table.

The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off.

Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage?

Thanks!

So, I'm trying to figure out the proper way to use display:block based on what my needs are.

My needs:
I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over).

However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc....

In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied....

For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box).

Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on.

If you need further clarification as well, just let me know.

Thanks.

Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear.

Take a look at www.webwizedezignz. co . uk to see what its like at the moment.

Cheers in advance

Thanks for taking the time to read my question.

I have a <div></div> that I am using to make a bar across my page. In this bar I am placing the links to the other pages on the site.

If I don't use float, the height is messed up. If I do use Float, the width shrinks to the minimum. So I added width: 100%; but that made it wider than the rest of the other bars I already have... at leasts in FF, but not in IE.

What should I be using? Float? Block? Inline? I've read the descriptions on http://www.w3schools.com/css/pr_class_display.asp but am still unclear on how to use them.

I would like to have an area as wide as the page, with links in it so that the height fits the text + the padding.

Does DocType help this? Not to clear on how to use that either.

Thanks again,

Brad




my code below.

HTML:
Code:

<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 20-Jan-2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contribution Help</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="piercedjunkmail@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link href="ChurchHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Bar1"></div>
<div id="TitleBar">Help for You</div>
<div id="MenuBar">
<div id="MenuItem"><a href="index.html">Home</a></div>
<div id="MenuItem"><a href="General.html">General Help</a></div>
<div id="MenuItem"><a href="Settings.html">Settings Help</a></div>
<div id="MenuItem"><a href="Contribution.html">Contribution Help</a></div>
<div id="MenuItem"><a href="Member.html">Member Help</a></div>
<div id="MenuItem"><a href="SiteMap.html">Site Map</a></div>
</div>
<div id="imgCont">
<img src="Images/ContributionForm.jpg" border="0" width="427" height="287" alt="">
</div>
</body>
</html>

CSS:
Code:

body {
margin: auto;

background-color: #bcb277;
font-family: Veranda, Arial, sans-serif;

}

#Bar1 {
background-color: #CC9900;
height: 10px;
}

#TitleBar {
background-color: #330033;
height: 30px;
color: green;
font-weight: 25px;
padding-top: 5px;
padding-left: 10px;

}

#MenuBar {
display: compact;
/*float: left;*/
/*width: 100%;*/
background-color: #006600;
padding: 2px;

}

#MenuItem {
float: left;
margin-left: 30px;
color: white;
}

#imgCont {
float: left;
padding: 12px;
background-color: #a99a66;

}

a:link {
    color: white;
	text-decoration: none;
}
a:visited {
    color: #DCDCDC;
	text-decoration: none;
}
a:hover {
    color: #A9A9A9;
	text-decoration: overline underline;
}
a:active {
    color: #8B0000;
}

source: bluewebpages.com/photography/album3/1

i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning)

mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue.

thanks,
amory

EDIT FIXED - need a float: left;

Thanks for taking the time to read my question.

I have icons that I want to place on my nav buttons (which are background imgs) without having to make the button and the icon one picture and have to load a seperate button for each link.

My problem is that I have my link text as block so that when the user hovers over anywhere in the button area, it's active, not just over the text.

What is happening is the icons are appearing below my button, not to the right of the text in the button.

Not sure how to get around this, or if I even can.

Thanks agian for your help

Brad


Should look like:

|------------------------|
| Link Txt {img here} |
|_____________________|

Currently looks like:

|------------------------|
| Link Txt |
|_____________________|

{img shows up here}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Notes</title>
<link rel="stylesheet" type="text/css" href="home.css" media="screen" />
</head>

<body>
<div class="header">
<h1>Home Notes</h1>
</div>
<p class="instructions">Select an option to start</p>
<ul>
<li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li>
<li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li>
<li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li>
<li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li>
<li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li>
<li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li>
</ul>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Notes</title>
<link rel="stylesheet" type="text/css" href="home.css" media="screen" />
</head>

<body>
<div class="header">
<h1>Home Notes</h1>
</div>
<p class="instructions">Select an option to start</p>
<ul>
<li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li>
<li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li>
<li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li>
<li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li>
<li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li>
<li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li>
</ul>

</body>
</html>

CSS:
Code:

@charset "utf-8";
/* CSS Document */

Body {
color: #000000;
background-color: #666666;
font-size: 18px;
padding: 0px;
margin: 0px;
}

.header {
background-color: #0066FF;
width: auto;
height: 70px;
border-bottom: 4px #333333 solid;
padding: 0px;
margin: 0px;
}

.header h1 {
padding: 0px 0px 0px 10px;
line-height: 60px;
margin: 0px;
}

.instructions {
padding-left: 10px;
text-decoration: underline;
font-weight: bold;
}

li.menuicon {
float: right;
}

li.mainmenu{
list-style: none;
line-height: 68px;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
padding-left: 10px;
margin: 4px 0px;
width: 183px;
}

li.mainmenu a:link{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:visited{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:hover{
text-decoration: overline underline;
display: block;
}
li.mainmenu a:active{
display: block;
}

Hey everyone,

I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list..

Does anyone know why this is?

Thanks,
Peter Barbosa

I'm new to CSS (Other then very basic CSS)

Anyway I have a menu which uses a tags, that also have a background image.

I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link.

Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding.

My code:

#buttonBackground {
display: inline-block;
background-image:url(/media/images/button_background.jpg);
background-repeat:no-repeat;
width: 113px;
padding-top: 4px;
height: 23px;
text-align:center;
vertical-align: bottom; (This isn't working either?)
}

and a sample link:

<a href="default.asp" id="buttonBackground">HOME</a>

Anyone able to help me remove the padding surronding the a tag?

I hate IE so much.

Ok, I have a list, with a display:inline-block; property.
Wanting a row of images, with text under each mage.

I thought I solved this with this property, but with IE, it doesnt put the images in a row, but places them one under the other.

FORM:
Code:

<ul>
<li>
<img src="images/news/dummy.png" name="News" width="100" height="100" /><br />
Category<br />
00/00/00</li>
</ul>

CSS:
Code:

#images ul
{
list-style:none;
text-align:center;
}

#images li
{
margin-right:15px;
display:inline-block;
}

Either a fix for IE, or a alternative to this would be great.
Thanks in advance, Joe.

Hello,

I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance.

test site is http://mtbireland.com/hkr



Code:

</div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 1') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
  <div id="footer-middle">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 2') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 3') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>

Code:

#footer {
	height:200px;
	padding:20 0 0 0;
	color:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
	font-family: Tahoma,georgia,Century gothic,  Arial, sans-serif;
	width:100%;
	float:left;
	background:#392E2C;
	text-align:left;
	}

/* Footer Widgets */
#footerwidgets {
	display: block;
	width:100%;
	background:#392E2C;
}
#footer-left {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 30px;
	padding: 10px;
	text-align:left;
}
#footer-middle {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}
#footer-right {
	width: 210px;
	float: right;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}

Hi all.

Question is in the title really. I have made a <td> a link e.g. the whole <td> rather than just the text within it. It works fine in FF, but only the first <td> in the table works in IE.

I have seen a hack/fix for this somewhere, but I cannot find it - google is good, but I can never re-find anything!

At the moment I have this CSS Code:
Original - CSS Code .tdmenu td a{ border: 1px solid #000000; display: block; } .tdmenu td a:hover{ border: 1px solid #000000; background-color: #FFFFFF; display: block; }

  

 .tdmenu td a{


  


     border: 1px solid #000000;


     display: block;


 }


 .tdmenu td a:hover{


     border: 1px solid #000000;


     background-color: #FFFFFF;


     display: block;


 } 

And here is a sample of my HTML HTML Code:
Original - HTML Code <table width="120px" border="0" cellspacing="2" cellpadding="2"class="tdmenu" > <tr> <td><a href="Exec">Exec</a></td> </tr> <tr> <td><a href="Updates">Updates</a></td> </tr> </table>

  

<table width="120px" border="0" cellspacing="2" cellpadding="2"class="tdmenu" >   
                <tr>
    <td><a href="Exec">Exec</a></td>
  </tr>
                <tr>
    <td><a href="Updates">Updates</a></td>
  </tr>
</table>

Thanks for your time and any help

J Noble

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

Hey there

Does anyone know why my code he

a.linky:hover .spany{display:block}

...does not work in ie6 but works SWEET in FF?

CSS:
.linky{z-index:200; display:block; position:relative; cursorointer;
}
.spany{
display:none;
position:absolute;
left:0px; top:0px;
width:120px; height:120px;
background:#ffffff;
}
a.linky:hover .spany{display:block;
}

HTML:
<a class="linky" href="http://www.domain.co.nz/">
<span class="spany"></span>
<img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/>
</a>

Thanks heaps guys for even looking!