Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Plus 1 button won't align with others


alt131 - 1:22 pm on Jul 4, 2011 (gmt 0)


Hi Kickedout, Suzy has limited time, so I'll try to explain what I think she was thinking until she has time herself.

BTW my code already worked ok in Firefox, in IE8 is showing the newline
Are you saying that because Suzy suggested firebug for firefox? If so, that is because you need to understand what code is being applied to fix the problem. ie8 has the developer tools, but firebug is easier to use and more powerful.

And what is #dad ? (since not applied to anything in the code
#dad is a background colour and setting it is a coding tecnique to help identify the dimensions of the elements when things are causing trouble. It can be any colour at all. As you see from the selector it is being applied to any iframe that is a descendent of div#plus.

Look in firebug or the developer tools in ie8 and you will see that although there is no iframe coded into the html, the twitter link loads one into div#plus. Test the code sample Suzy provided and you will see the background-color is being applied to that iframe.

Why is 21px height important?
This is to set a uniform height for all the iframes. Notice the twitter iframe and myspace button are only 20px high - while the facebook iframe is 21px? Setting 21px height removes that difference.

#contain iframe {background: float: left;}
There is no value for the background property so that code won't work as it is invalid. The Opera webdevelopers course has a better explanation about properties and values [dev.opera.com].

I'm not seeing a newline in ie8 in either your posted code or Suzy's sample. That suggests there is something else in the code that is causing it. I suggest you validate your html and css. Then look for a <br>, and if not, the styles being applied to the elements. If you can't figure out how to adjust the styles yourself, post a short sample of what you have now (just as you did for the OP) so we can take a look.


Thread source:: http://www.webmasterworld.com/css/4332852.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com