Unintended Consequences - Or Artifacts

[george]

When you look at my page http://www.get-fit-for-life.com/ZendFWQS/public/ and you look at the blue buttons for Home and About, you will notice that there is what appears to be a white retangle box overlaying part of the buttons, and a margin between a button text area and its right end cap image. I can not for the life of me figure out what is putting these artifacts on the rendered page. The CSS portion is as follows:

.thrColFixHdr #header-navigation { 	display:block;	height:36px;	width:900px;	background-color:#FFFFFF;	padding:0;	margin:0;}a.button {	display: inline;	position: relative;	top:-21px;	left:-4px;	margin:0;	padding:0;	width:auto;	height:auto;	background: url(/images/Aqua_middle.gif) repeat-x;}.buttonText { 	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;	font-size: 12px;	font-weight:bold;	padding:0;	margin:0;}

And here is the applicable HTML

	<div id="header-navigation">			<!-- To keep urls consistent with the applications router (right now we			 are using the default router), we will employ the use of the url			 view helper			 http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial			 -->		<img src="/images/Aqua_left.gif" />		<a class="button" href="<?php echo $this->url(array('controller'=>'Home'), 'default', true) ?>" >			<span class="buttonText">Home</span> 		</a>		<img src="/images/Aqua_right.gif" />				<img src="/images/Aqua_left.gif" />				<img src="/images/Aqua_middle.gif" />		<img src="/images/Aqua_right.gif" />						<img src="/images/Aqua_left.gif" />		<a class="button" href="<?php echo $this->url(array('controller'=>'About'), 'default', true) ?>" >			<span class="buttonText">About</span> 		</a> 		<img src="/images/Aqua_right.gif" alt="I want my alt" />	</div>

Is there a way I can attach my whole HTML and CSS? Thanks, and you people are great.

[Jack McKalling]

Apparently, I am forbidden to visit the url you mention. Without seeing the result, I think it may have got something to do with the relative positioning that you use. But can I see it?

[george]

Apparently, I am forbidden to visit the url you mention. Without seeing the result, I think it may have got something to do with the relative positioning that you use. But can I see it?

This is strange that you can't see the page. I only click on the link I provided in the topic starter, and the page appears. I just tried it again, and it works fine for me, both in ie 8 and in firefox 3.0.14. I wonder if you copied and pasted the url instead of using the in message link, maybe that might work. Also, since "upgrading" to ie. 8, I notice many pages I go to will display a microsoft "Internet Explorer cannot display the webpage" message, and then when I click on the refresh icon, the page renders just fine. I don't know what microsoft was trying to do here, or how to work around it. Here is a new url wherein the css is in the header of the html doc http://www.get-fit-for-life.com/test.html and all non-errant parts of the page are not included. This page demonstrates two buttons, button 1 with the relitive positioning of the background and 2 without. You had suggested that the rendering problem might be due to the relitive positioning of the <a tag in class button, so I created a class button2 for the second button, so you can see the rendering with and without the relitive positioning. The middle image shows the two end caps, left and right, and the middle line which gets repeated to fill the background for the link tag. There should not be the space between the images. I attempted to get rid of that white space by creating this class for the image tag

img .nospace { 	margin:0;	padding:0;	border:none;}

But this does not remove the white space. I hope you can see the page with either the in-message link or a copy and paste of the new url. Thanks

[Jack McKalling]

Unfortunately, I am still getting the browser's Forbidden 403 error massage, whichever method I used to visit the link, and whatever browser I use. Could it be that your server treats IP's differently, of you have an automated loginsystem buildt in?

[chibineku]

You should DL Firebug for FireFox - using it, you can view the source of styles that an element has inherited, which will tell you exactly where it has come from. It's likely you just weren't specific enough with a previous element's styling and it has spilled over.

[george]

Unfortunately, I am still getting the browser's Forbidden 403 error massage, whichever method I used to visit the link, and whatever browser I use. Could it be that your server treats IP's differently, of you have an automated loginsystem buildt in?

I do have an HT. access ip filter. Let me remove that right now. Ok, that gone, can you access my url now? Visit My WebsiteAll the code required to render the example is included in the HTML file - except the images themselves.Edited to correct the url in the link. I still get the ie8 cant display message, then press reload. What is with the ie8 can't display message? I get it on other pages also.

[Jack McKalling]

Ok, now I understand. You reposition the text between the button edges to the left and top, but its original place will still be of the same width. If you move an element to the left, elements to its right will not move with it You should try to align the text inside the button, and not the button element (<a>) itself. Don't use position or left at all, just give the button a display:block and dimensions, and remember to put it in a table row or something to be able to horizontally align them (block-level elements cannot normally be on the same line).Hope this helps Edit:The reason for this, is that you cannot align vertically or horizontally with inline elements, or even give them dimensions to be able to do that in the first place.

[george]

You should try to align the text inside the button, and not the button element (<a>) itself. Don't use position or left at all, just give the button a display:block and dimensions, and remember to put it in a table row or something to be able to horizontally align them (block-level elements cannot normally be on the same line).The reason for this, is that you cannot align vertically or horizontally with inline elements, or even give them dimensions to be able to do that in the first place.

Thanks Jack - I am trying to wean myself off of tables. If you take a look at my test site now, you will notice that my buttons are now rendering properly; but they are not lined up in line. . They exist in three blocks. Can I somehow put these three blocks in line, so I get a line of buttons? The outer green box, I believe, helps keep the buttons elements in line. Thanks again.

[Jack McKalling]

You are right, tables are not always a nice choice. Eventhough I still use them myself, I see others may like to avoid them.There is also the possibility of using an unordered list, that you do position on a line (check this example), however it will not be Xhtml Strict, as your doctype specifies. In fact, your page isn't already, see here.In the end, you will get to keep the fact that block level elements cannot be placed on the same line, unless you embed them in inline elements, which is not allowed in Strict. I only know of tables, but there may be other very complex sollutions if you want it valid and cross-browser aswell.

[Synook]

Tables should never be used for layout. Simple.

In the end, you will get to keep the fact that block level elements cannot be placed on the same line

You can float them - just add float:left to the #menu.

[george]

You can float them - just add float:left to the #menu.

Beautiful! Thank you Synook. Problem solved.

[Synook]

Don't forget to add a clearing element beneath them (with clear:both; ), or else things coming after it will also "float" into the space occupied by the menu.

[george]

@#&^$$ Ok people, I am hoping you can help pull me out of the mud here. When I last requested help with my “buttons” issue, I got my test snippet to work as I wanted. It still does. I am trying to replicate the three buttons here in my actual page. It does not work. Instead, my buttons end caps are missing, and they are replaced by the background image that fills the middle of the button. Ok, my buttons consist of a left cap, a text area, and a right cap. These are represented in the style sheet as

.button {	display: block;	width: 100%;	height: 36px;	clear: both;	background:url(/images/Aqua_middle.gif) repeat-x;	overflow: hidden; }.buttonCapLeft {	background-image: url(images/Aqua_left.gif);	background-repeat: no-repeat;	display: inline;	width: 30px;	height: 36px;	float: left;}.buttonCapRight {	background-image: url(images/Aqua_right.gif);	background-repeat: no-repeat;	display: inline;	width: 30px;	height: 36px;	float: right; }.buttonText {	font-size: 12px;	width: auto;	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;	padding-top: 5px;	height: 36px;	float: left; }

And the HTML for the buttons is

		<div class="menu">			<a class="button" href="java script:closeWindow('menu')" >				<span class="buttonCapLeft"> </span> 				<span class="buttonText">Home</span> 				<span class="buttonCapRight"> </span>			</a> 		</div>		<div class="menu">			<a class="button" href="java script:closeWindow('menu')" >				<span class="buttonCapLeft"> </span> 				<span class="buttonText">About</span> 				<span class="buttonCapRight"> </span>			</a> 		</div>		<div class="menu">			<a class="button" href="java script:closeWindow('menu')" >				<span class="buttonCapLeft"> </span> 				<span class="buttonText">Contact</span> 				<span class="buttonCapRight"> </span>			</a> 		</div>	</div>

It was suggested that I use the Firebug plug-in for Firefox, which I am now using. I have found it very helpful, but I'm sure I could get more out of it if I found a good user guide for it. Suggestions will be most appreciated. Thanks againGeorge

[Synook]

I suggest you try to fix up some of the errors that your page currently has.

[george]

I suggest you try to fix up some of the errors that your page currently has.

Ok, thanks. After lunch.

[jlhaslip]

I have found it very helpful, but I'm sure I could get more out of it if I found a good user guide for it. Suggestions will be most appreciated.

Just like the violin, you learn if you practice. Play around with it on a page. Can't hurt anything. A refresh will restore the original page.