|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 1st, 2008, 01:32 PM
|
|||
|
|||
|
Div class not behaving in Safari - work around?
Hey Guys...
I have a piece of code that displays ok in Firefox (and I suppose IE) but not Safari. Here's the URL - http://www.pizza.bowlerhatmedia.com/spc/theusual.html In safari everything squishes left. In firefox they spread out like they are supposed to across the bottom. Here's the line of code in the html doc: Code:
<div class="contentbox2_2"> <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span> </div> and here's the supporting CSS Code:
}
.contentbox2_2, .contentbox3_2 {
font-size: 15px;
font-weight: normal;
}
.red {
color: #ac3a24;
}
What can I do to position these across the bottom in safari and make everything else ok in the other browsers? thanks!
|
|
#2
May 1st, 2008, 02:27 PM
|
|||
|
|||
|
Here's a suggestion. I messed around with this for literally 3 hours. Here's a suggestion. Give the div a text-align: center;. Then make sure width is 100%. (Ps: don't nest spans. Use a different tag.) Give EACH one of the petite, medium, large a separate class or ID. Then for petite, give it a float: left;. For medium, do nothing (So just remove the class for it lol.) And for large, give it a float right;. If that doesn't work try setting the right and left margins. Enjoy. I put like 2 hours just trying to find a solution lol.
|
|
#3
May 1st, 2008, 02:44 PM
|
||||
|
||||
|
Welcome to DevShed Forums, pcdesignwerx.
 The graphical design is very nice, however, your code is not nice at all. I'm glad to see you're not using <table>s, but you have divitis, span-mania, class-mania, and are needlessly (mis)using JavaScript for your navigation. I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML. Don't name a class based on it's current color. Change "red" to "price". I hope you'll stick around so we can help you improve your skills. Now to address your specific question, replace Code:
<div class="contentbox2_2"> <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span> </div> <div class="sep"></div> with Code:
<ul class="sizes"> <li class="first">Petite: <span class="price">$11</span></li> <li>Medium: <span class="price">$14</span></li> <li class="last">Large: <span class="price">$16</span></li> </ul> and add these style rules: Code:
ul.sizes {
list-style-type: none;
padding: 0 0 5px;
margin: 0 0 5px;
float: left;
width: 100%;
border-bottom: 1px solid #bcbdc0;
}
ul.sizes li {
float: left;
width: 33%;
text-align: center;
}
ul.sizes li.first {
text-align: left;
text-indent: 1em;
}
ul.sizes li.last {
text-align: right;
}
ul.sizes li.last span.price {
margin-right: 1em;
}
span.price {
color: #ac3a24;
}
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around. Last edited by Kravvitz : May 1st, 2008 at 02:50 PM. Reason: moved my reply to GameYin to a new post
|
|
#4
May 1st, 2008, 02:45 PM
|
|||
|
|||
|
Wow, kravvitz comes in with the correct answer. I spent 3 hours working on that code and I couldn't get the right answer! Where's the love for me
|
|
#5
May 1st, 2008, 02:53 PM
|
|||
|
|||
|
hahaha. Well thank you to you both.
Believe me I will take my knowledge further by being here. It was only a short time ago that i was still using tables... thanks again for the help.
|
|
#7
May 1st, 2008, 02:56 PM
|
||||
|
||||
|
@GameYin
Floating them like you suggested won't work because of how float order works. The one with float right would be on the line below the other two. Just because I came up with a better solution doesn't negate the fact that you spent time trying to work out a solution. Trying to help people here is an excellent way to improve your own skills. Also remember that I have a good deal more experience at this than you so I'm aware of what works and what doesn't for many situations already. And there's nothing wrong with that. We all have to start somewhere. Also, you posted while I was writing my own reply, so I didn't see it until after I posted mine.
|
|
#8
May 1st, 2008, 03:03 PM
|
|||
|
|||
|
Yea I know that once I tried it. I thought you couldn't span together. I had alot of time on my hands so I decided to try and diagnose. I was gonna get close. I had a list of possible things to try. What you had (close to it) was a little further down my list. I wanted a reply before you came in here because I knew you would have the right answer.
|
|
#9
May 1st, 2008, 03:05 PM
|
||||
|
||||
|
@pcdesignwerx
You're welcome As to your navbar, check this out. I would appreciate it if you would post a reply to your thread at WeLoverCSS.com saying that you got your solution here. "Netiquette" frowns own posting the same question in multiple forums, so please try to avoid doing it without telling us.
|
|
#13
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
