Why does this happen??

Max

Jr. Member

Posts: 75

Why does this happen??

« on: Jan 11, 2011, 02:08:59 pm »

I'll be the last one that claims to understand CSS, but this is something I just don't get. I have this CSS:

<div style="width:900px;font-size:14px;font-weight:bold;font-family:arial,helvetica,swiss,sans-serif;color:#585858;text-align:center;">
<span style="float:left;padding: 0 2px 0 2px;background-color:#dcdcdc;cursor:pointer;">Some Text</span>
CENTERED TEXT
</div>

This all works fine until I add a border- any border- to the span element, and then it pushes everything waaaay to the right. What's going on with that? Is it supposed to behave that way?


	Logged

bizzar

Newbie

Posts: 19

Re: Why does this happen??

« Reply #1 on: Jan 11, 2011, 02:32:41 pm »

One thing I like to do when those things happen is to just put different colored borders around everything and see where things are initially...

Code:

<div style="width:900px;font-size:14px;font-weight:bold;font-family:arial,helvetica,swiss,sans-serif;color:#585858;text-align:center;border:1px solid blue;">
<span style="float:left;padding: 0 2px 0 2px;background-color:#dcdcdc;cursor:pointer;border: 1px solid red;">Some Text</span>
CENTERED TEXT
</div>

Here I added a blue border around your div, and a red one around the span. Makes it easier to see what changes whenever you change your code. and when your done, just turn them off.


	Logged

Max

Jr. Member

Posts: 75

Re: Why does this happen??

« Reply #2 on: Jan 11, 2011, 04:33:29 pm »

I found that if I just put another span around the bordered-span, it all works just fine. I have no idea why that is.

I have to say, CSS is not my strong point.


	Logged

cuberat

Newbie

Posts: 40

Re: Why does this happen??

« Reply #3 on: Jan 13, 2011, 07:07:11 am »

Inline style attributes (style="name:value") can be difficult to maintain and work with. I broke out your code to use CSS, and it looks okay. Also, if you use px to size text, it might not adjust if the site visitor zooms in with the browser.

Hope this helps.

Code:

Highlight Mode: (HTML)
<html>
<head>
<title>Test</title>
<style type="text/css">
#divMain
{
width:900px;
font-size:1.4em;		/* Might be better to use percentages or ems so the font size adjusts with browser settings */
font-weight:bold;
font-family:arial,helvetica,swiss,sans-serif;
color:#585858;
text-align:center;
}
.spText
{
float:left;
border:1px solid #008;
padding: 0 2px 0 2px;
background-color:#dcdcdc;
cursor:pointer;
}
</style>
<body>
<div id="divMain">
	<span class="spText">
		Some Text
	</span>
	CENTERED TEXT
</div>
</body>
</html>


	Logged

Tags:

Pages: 1

« previous next »