Jump to content

too many spans?


S@m

Recommended Posts

Bottom line I am trying to create the red "apply now" button. - The whole thing (personal loan & apply now sections)LINKAGESo far I am going this route:HTML:

<span class="headlineButton">Personal Loan<span class="redButton">Apply Now!</span></span>

CSS:

.headlineButton {	border: 1px solid #999;	font-weight: bold;	margin: 0px 0px 0px 0px;		padding: 0px 0px 0px 0px;	}	.redButton {	background-color: #990000;	margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;	border: 1px solid #660000;	}.redButtonText {	background: url(../images/caret-white-right.gif) no-repeat left;	border-top: 1px solid #ff3333;	border-right: 1px solid #ff3333;	border-left: 1px solid #ff3333;	color: #fff;	margin: 0px 0px 0px 0px;	padding: 0px 6px 1px 8px; 	}

FF doesn't pick up the padding around the red button, IE does. I know that padding can have problems across platforms. The other concern is that is, it can't be a good idea to have span inside of span inside of span is it?I apologize if this is confusing... :)Thank you for your time and help!

Link to comment
Share on other sites

Oops sorry, I meant to add one more.HTML:

<span class="headlineButton">Personal Loan<span class="redButton"><span class="redButtonText">"Apply Now!</span></span></span>

I just wasn't sure if that was the best way to go about it. Having that many span classes inside each other.Firefox has a problem with the padding/margins doing that. It doesn't like putting the red box inside of the headlineButton class. The top and bottom margins are off by 1px.Am I looking for problems doing it this way?Thank you for your time!!

Link to comment
Share on other sites

<span class="redButton"><span class="redButtonText">"Apply Now!</span></span>
Why not put all that under one class? All formatting can be done within one .class_name{}
Link to comment
Share on other sites

Well, I just have a lot of borders there, and I wasn't sure what the best way to go about it is.Here is what I finally came up with:HTML:

<span class="headlineButton">Personal Loan<span class="redButtonBorder"><span class="redButtonText"><a href="#" title="Apply Now">Click Here</a></span></span></span>

CSS:

.headlineButton {	font-size: 11px;	font-weight: bold;	border: 1px solid #999;	margin: 0px 10px 0px 0px;		padding: 3px 1px 3px 4px;	_padding: 1px 1px 1px 4px;	}.redButtonBorder {	border: 1px solid #660000;	background-color: #990000;	margin: 0px 0px 0px 8px;	padding: 1px 0px 1px 0px;	_padding: 0px 0px 0px 0px;	}	.redButtonText {	color: #fff;	margin: 0px 0px 0px 0px;	padding: 0px 5px 1px 8px;	border-top: 1px solid #ff3333;	border-right: 1px solid #ff3333;	border-left: 1px solid #ff3333;	background: url(../images/caret-white-right.gif) no-repeat left;	}

If there is a better way, please let me know. If I need to trash what I have, that's A-Ok. I had to use the underscore hack to get IE and Firefox to match up. (if that matters)Thank you for your time so far Jonas

Link to comment
Share on other sites

Heh, underscore hack. That just proves how terrible IE is. I use it under a different name, the star hack *css_information... :)Anyway, remember that you can also put styling on your <a> tag, to save at least one <span> tag.a.class_name {border: blah;}That being said, I prefer to use id's, instead of class.html<a id="something">Link_text</a>cssa#something {}ID's have to be unique, classes don't.

Link to comment
Share on other sites

But if you're planning making more 'buttons' inside a division or inlining, you should use classes because of the repeatedly having the same styles for different items.I also suggest not to use a span for the outer border, but instead, a block-level element like <div>. It can have width specified that is why :( (when no with can be assigned, e.g. when it is an inline element, alignment cannot be assigned either.)Besides, there are always alternates, you definately won't have to use so many spans, at least not inside eachother. :)Instead, something like:

<div class="whatever_border"><input class="whatever_button" type="button" onclick='some active script' /><input blabla /><input blabla /></div>
With this, you are able to have a division with class "whatever_border" that can have any style, and inside a number of real buttons, class "whatever_button", that also can have any style.It is just like the bar at the bottom of this topic, with the buttons "Repost", "Top", "Quote" and "Reply" :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...