font color and size: safari vs. firefox
-
-
- o
- Rocketeer
- Posts: 66
- Thanks: 0
-
Hi!
I'm using a Mac and viewing my website in both Safari and Firefox.
I have a module published to the Showcase position.
In the template manager the text color is set to green.
For this particular module, I want the text white and bigger.
I'm using the following code.
It works perfectly in Firefox and shows up Green and Smaller in Safari
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="color:#ffffff;font-size:medium;">
<p><strong>Contact Uptown Living Dallas</strong><br /> <strong>Jennifer Nix | Broker <br />This email address is being protected from spambots. You need JavaScript enabled to view it. <br />214 212 7655</strong></p>
</span></p>
<p> </p>
<p> </p>
Here's a live example as well:
uptowndallasspace.com/index.php?option=c...le&id=142&Itemid=444
Your ideas and input are GREATLY appreciated!!!
Thanks in advance!
Emily
-
-
-
- Mark Matsusaki
- Sr. Rocketeer
- Posts: 165
- Thanks: 0
-
Don't use font sizes specified in "large / medium / small"
There is too much variation between the browsers there, as they're implemented differently - which you're witnessing.
<p><span style="color:#ffffff;font-size:medium;">
Try using a font size set to px instead
<p><span style="color:#ffffff;font-size:13px;">
If you really wanted to get into it, you could define a class your CSS and set the span style to it, or you could think about using some of the built in typography of the Zephyr template.
demo.rockettheme.com/aug10/features/temp...hy/rokcandy-examples
FYI - Its green in Chrome too. - Google Analytics Certified Individual.
-
-
-
- o
- Rocketeer
- Posts: 66
- Thanks: 0
-
Hi Mark!
Thank you for the tip on font size that does work well... I actually used an h3 header which is perfect...
I think we used to be able to use CSS to define the color of all h1-6 headers... but with these new templates I'm having trouble finding a place to define the color separate from the general font color... any thoughts?
It's still not showing white in Safari...
I'd love to define a CSS class/span... could you give me some pointers on how to do that?
Thanks again so much for your help!!
Emily
-
-
-
- Mark Matsusaki
- Sr. Rocketeer
- Posts: 165
- Thanks: 0
-
You have the H3's contained in a SPAN with the color set to white. Which I'm guessing Safari is ignoring.
If you want to edit the H3, in the gantry.css, at 51, you'll see all the H tags grouped together.
You'll want to copy out the h3
Change this
h1, h2, h3, h4, h5 {
}
to:
h1, h2, h4, h5 {
}
Then at line 54,
add the line height and margin back to the h3.
you can also set the color there.
If you'd like to create a custom class, edit your template.css. Hop to the end of the file, and insert this:
.PageTitle {
font-size: 175%
color: #fff;
}
Save and upload.
Then in the module where you have the contact info
<div class="PageTitle">Contact Uptown Living Dallas<br/>
Jennifer Nix | Broker<br/>
This email address is being protected from spambots. You need JavaScript enabled to view it.<br/>
214 212 7655<br/>
</div> - Google Analytics Certified Individual.
-
Time to create page: 0.120 seconds