CSS: doesn't line up in F/fox

I am new to laying out with CSS. I added a background to the
body that repeats on the X and has a horizontal bar part way down
the page. I need that horizontal bar to line up with the bar on the
main page design, which I have contained in a wrapper div.
It lines up perfectly in IE, but is off in F/Fox.
Any suggestions? Thank you!
Here is the page
http://norcaltoc.com/new/new.html
Here is the CSS
body {
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-color: #292C31;
#wrapper {
width: 840px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 5px;
.clear-float {
clear: both;
background-color: #000000;
height: 15px;
#nav {
background-image: url(images/nav-back.jpg);
background-repeat: repeat-x;
width: 143px;
float: left;
background-color: #292C31;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
margin-bottom: 0px;
#wrapper #nav a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 13px;
text-decoration: none;
padding-left: 5px;
letter-spacing: .1em;
#wrapper #nav p {
padding: 0px;
margin-top: 12px;
margin-bottom: 0px;
#wrapper #nav img {
padding-top: 20px;
#wrapper #header {
width: 695px;
float: right;
height: 258px;
margin: 0px;
padding: 0px;
#wrapper #main {
width: 670px;
float: right;
background-color: #FFFFFF;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 15px;
height: 100%;
}

kayaker wrote:
> I am new to laying out with CSS. I added a background to
the body that repeats
> on the X and has a horizontal bar part way down the
page. I need that
> horizontal bar to line up with the bar on the main page
design, which I have
> contained in a wrapper div.
>
> It lines up perfectly in IE, but is off in F/Fox.
Hi,
You could try replacing your rules for these....
body {
margin:0;
padding:0;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-color: #292C31;
#wrapper {
width: 840px;
margin-right: auto;
margin-left: auto;
padding: 0px;
padding-top: 21px;
chin chin
Sinclair

Similar Messages

Metronome BPM Doesn't Line Up

The metronome on Logic Express 8 is completely off for me. If I import anything at a given tempo, and set the computer metronome to the same tempo, it doesn't line up. For example, I downloaded the Radiohead "Reckoner" remix stems, which listed the BPM at 103.4. I changed Logic's metronome to match, and within about 10 measures it was off by almost a full beat. Any advice on how to fix this?

Firstly you are not using a doctype (which sends non
compliant browsers into
quirks mode)....
more about this here:
http://www.alistapart.com/articles/doctype/
Secondly, the whole page is just a sliced up image. If Search
Engine
placement is going to be important to you the page isn't
going to do very
well as there is no actual 'text' on the page for the spiders
to 'feed on'.
You should be slicing up that original image and then
building the page in
Dreamweaver itself, not letting a graphics program slice the
image and
exporting the html that it generates. It generates a very
fragile and
inflexible layout.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
~ Forum Posting Guidelines ~
http://www.adobe.com/support/forums/guidelines.html
> I made the page in dreamweaver, but it doesn't line up
correctly in IE for
> PC's.
> Every other browser is fine except that one :(
>
> www.johnsantora.com
>
> Please let me end this pain and suffering
>

Air HTML/JS WinXP - Font specified in CSS doesn't work in App

I have an app that runs on several machines... on one of
them, however, the font has started failing to load in my app. The
App loads a web page and displays it. The font is installed locally
on the machine. I can use it in IE and Wordpad, but the App doesn't
see it.
The other machines have no problems with the app. The machine
has been upgraded to Air 1.5, but the App was built for 1.0. The
font is an OpenType font.
I have tried all manner of things to get the font to show up
properly: Changing the CSS, making sure the font works properly,
renaming and trying it. Removing the application's directory in
\Application Data\.
It looks like it's defaulting to Arial or some such font...
the system default. The system has a Volari XGI video card in it.
Could that be the problem? Is there a cache I need to clear?
Thanks in advance!

Hi zac,
excuse me, but I'm confused too. Is your question really for: "css doesn't work in live view or f12"? To me it seems you have, more probably, questions about your website. If yes, let's start slowly. The first thing that strikes me is this:
The reference to your banner-image must be one to "banner.jpg" file, not to a *.html.
Maybe I can be in touch with you a later again, you know, here's Christmas stress!Hans-G.
P.S.
If my assumption regarding the threads is true, then please open a new one.

Photoshop CC: Copy CSS doesn't work when text is styled as paragraph

I'm using the most recent version of photoshop, CC-14.0, on a Mac running OSX 10.8.4
I'm finding that the "copy css" function does not work if a paragraph is styled with a custom paragraph style. In other words any text that is not styled as "basic paragraph" or "basic paragraph+".
I can copy css from a text block with a custom paragraph style, but the css is wrong. It doesn't reflect the attributes I have set up in my custom paragraph style. Instead it writes out the default "basic paragraph" style. If I copy the css from a text block styled as "basic paragraph+" it writes the css correctly.
This is disappointing because it defeats the purpose of being able to create paragraph and character styles (like in InDesign).
This is a bug or oversight, right? Is there a reason why it should work this way?

14.0 is not latest version. Click Help/updates

Feature setting Masterpage & CSS doesn't work when included in SiteTemplate - but does work when activated manually

Hi,
I'm experiencing a strange behaviour recently. I wrote a feature with an EventReceiver that sets the masterpage and alternate css file for the current spweb it is activated for. When I activate that feature manually it works like expected. But if I include
the same feature in a SiteTemplate and it is called during site-creation, it doesn't work. I debugged it and stepped through it. As far as I can tell everything looks right. It sets the masterpage and css file like it should and throws no error. But when the
site loads in the end, it suddenly still uses the v4.master and no alternateCSS. How can that be?
If I deactivate the feature then manually and activate it again, it works...
Here's the feature:
const string masterPage = MyOfficeProcess.master";
const string searchMasterPage = "MyMinimal.master";
const string alternateCss = "MyOfficeAlternateProcess.css";
public override void FeatureActivated(SPFeatureReceiverProperties properties)
SPWeb web = (SPWeb)properties.Feature.Parent;
using (SPWeb topLevelSite = web.Site.RootWeb)
string relativePath = topLevelSite.ServerRelativeUrl;
if (!relativePath.EndsWith("/"))
relativePath += "/";
if (web.WebTemplate == "SRCHCENTERLITE" || web.WebTemplate == "SRCHCEN" || web.WebTemplate == "SRCHCENTERFAST")
web.CustomMasterUrl = relativePath + "_catalogs/masterpage/" + searchMasterPage;
else
web.MasterUrl = relativePath + "_catalogs/masterpage/" + masterPage;
web.CustomMasterUrl = relativePath + "_catalogs/masterpage/" + masterPage;
web.AlternateCssUrl = relativePath + "Style Library/My/" + alternateCss;
web.UIVersion = 4;
web.Update();

Hi,
You can put a copy of your master page within the template site, use that for the site's master page, and then save the site as a template then check whether it works.
Here is a similar thread for your reference:
http://sharepoint.stackexchange.com/questions/30699/featureactivated-not-called-for-site-template
Thanks,
Dennis Guo
TechNet Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected]
Dennis Guo
TechNet Community Support

Site won't follow CSS rule, horizontal line colour.

Hi,
I have made a CSS syle:-
.hr {
border:0;
border-top: 1px solid #840017;
height: 0;
background: #840017;
This makes a horizontal line to act as a break. But in FF and IE it comes out grey and not claret (#840017)
Any ideas what I have done wrong?
page can be seen here
http://www.thevillagers.co.uk/matchreports/1011/chinnor15holyport.html
Thanks,
Richard

.hr {
border:0;
border-top: 1px solid #840017;
height: 0;
background: #840017;
This makes a horizontal line to act as a break.
Unfortunately not.
You've inadvertently defined a class of "hr" (which has no effect on the <hr> tag), rather than re-defining the format of the <hr> tag (which is your intention).
Remove the leading period (full stop) from in front of the hr in the stylesheet to change it from a class="hr" to a tag selector <hr>.
Change
.hr
to
hr
A subtle but important difference.

Saving css doesn't hold in preview

I'm running through some tutorials and every time I save the css to preview the page in the browser none of the properties are displayed. It looks fine in Live view and I know that I have to save the css file before previewing but I must be doing something wrong. I'm clicking on the css name in the Related files menu on top before saving. I there something else I need to do to get these to stick?

Thanks for working with me on this. I'm following a tutorial out of David Powers book so, no, it is not on-line for you to view.
I've placed both css files in the same folder but and changed the href line but it still hasn't helped.    It is possible that this was not intended to be two css files but that the block quote code should have been done within the stroll4_import.css and replaced the stroll_border.css as a new generation.
Here is the css for stroll_border.css
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
.twoColFixLtHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border-left: 1px dashed #000000;
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
p {
font-size: 85%;
line-height: 1.3;
blockquote {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
background-color: #999;
margin: 10px;
padding: 0;
blockquote p {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
background-image: url(../../images/top_quote.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: 20px;
#quote_attrib {
background-image: url(../../images/btm_quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
font-size: 70%;
margin-top: 0px;
padding-bottom: 30px;
text-align: right;
text-indent: 0px;
And here is for the stroll4_import.css
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
.twoColFixLtHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border-left: 1px dashed #000000;
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
p {
font-size: 85%;
line-height: 1.3;
blockquote {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
background-color: #999;
margin: 10px;
padding: 0;
blockquote p {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
background-image: url(../../images/top_quote.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: 20px;
#quote_attrib {
background-image: url(../../images/btm_quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
font-size: 70%;
margin-top: 0px;
padding-bottom: 30px;
text-align: right;
text-indent: 0px;

CSS unordered list {line spacing question}

Hi everyone.
I am trying to make a bulleted list, and I have 5 elements.
Some require one line, while others require two lines. But the
thing is, I want the leading to be lets say 20pt between items. But
since some of the items require two lines, i want those items to
have their line spacing closer so they can seem that they are part
of the same bullet point. Is there any way I can do this? Is it
even possible?
Any help would be appreciated.
Thanks
-Ce

Use <ol> or <dl> or <ul> list container and
wrap your bullets in individual <li> tags.
use css to style the line-height of the lis. Use a class on
each group of lis to set the line-height.
<ul>
<li class = "double_height">Item 1</li>
<li class = "single_height">Item 2</li>
<li class = "double_height">Item 3</li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
.double_height {
line-height: 2.5em;
.single-height {
line-height: 1.2em;
You can play with the settings to get the best results but
this code will give you an idea of what is possible.
regards
Nick Barling
www.barkingweb.com

Using CSS to change line chart tick mark font

I apologize if this has been covered elsewhere, but I can't find any reference to help with this.
I have create a dark-background theme for my CSS and have run into a bit of a blind spot with the CSS. My chart has a dark background, and I can find no way to change the color of the font on the tick marks. I have resorted for now to setting the individual axis objects setTickLabelFill for now, but it would be nice to be able to set this in CSS.
With this, I can change the font size of the axis labels and tick marks, but the font name and color are ignored for the tick marks:
.axis {
-fx-font: 14px "Palatino Linotype";
-fx-text-fill: white;
Thank you for your help.
- Jim
Edited by: 871682 on Aug 2, 2011 11:47 AM

That did work in 1.3, and I hoped it made it into 2.0, but that setting didn't help.
Setting the -fx-text-fill in -axix-tick-mark .label doesn't work either, or any variation I tried.

CSS doesn't work at the report data font size.

Greetings,
I'd like to adjust the font size of the data in a report because it has lots of columns. I used the alternating row color template with little modification. Since the CSS put everything by default size = 12px: <br>
* (line 2)
font-size: 12px;
<p>
I had to add the snippet in the header part:
<style type="text/css">
td.t12data {
font-size: 10px;
</style> "
<p>
Then the font size of all data was changed but the data with font descriptor like:
'<font color="#FF3522"> </font>'. The font size would NOT be changed to 10px, and stayed as 12px as the default. If I remove the color stuff, the size would be changed. Furthermore, the CSS class applied on those colored data are NOT as same as those regular data, say t10data. If I clicked them (CTRL_SHIFT_Y) in Firefox, it showed the default part, i.e. line 2 of CSS; but they are supposed to belong to the same CSS class, t10data.
<p>
My question is:
1) If I still want to keep those colors, how may I solve the problem?
2) Is there a way to change the color of a whole column? I tried to play with the column attribute but didn't succeed.
Thanks.
Message was edited by:
Luc

Hmm, I still could not find the reason why some rows in the table do not use the td.t10data style, instead the default style, the '*', ( from the FF WDE with CTRL+SHIFT+Y). So the font sizes are always 12px as:
* (line 2)
font-size: 12px;
Also, since I use the javascript to change the color of some columns, the font size of everything of those columns are also the default style, no matter how I changes font size in the script like:
td1.style.fontfamily='Arial';
td1.style.fontsize='10px';
Can somebody shed some light? Thanks in advance.

Dreamweaver re-writes CSS in mutliple lines. Is there a workaround?

When I hand-code css styles in my pages - I write them in a single row. For example:
a{color:#4488c3; font-weight:bold; text-decoration:none}
but if I use DW to change a property - it automatically rewrites it in multiple lines:
a{
    color:#F00;
    font-weight:bold;
    text-decoration:none
Any way around that? I went into preferences and didn't see anything that addresses that...
thanks...
DB

Preferences > Code Format. Click the Advanced Formatting CSS button.
Inside the dialog box, deselect Each property on a separate line.

Boilerplate.css doesn't validate

hi - i am working on a website using the fluid grid design tool, however the boilerplate.css that Dreamweaver automatically generates does not pass WC3 validation. if i just comment out the lines with errors, will this effect the usability of the site across a variety of browsers? i have attached an image of the errors. the site url is: sodeopec.aocs.org
as it is right now, i am noticing some weird issues in IE 11. of course this does not surprise me, but a majority of the people viewing this site will be on IE so i do need to find out how to fix address the IE errors. in IE, on certain pages with external links and breadcrumbs, hovering over these links causes content in the body of the page to disappear: http://sodeopec.aocs.org/program/content.cfm.
Many thanks for any suggestions.

Your content page is missing a closing </div> for
<div class="gridContainer clearfix">

Speed dial with separate CSS from primary line

Hello All,
I have a question about the possibility of using speed dials on a phone in a somewhat restricted sense. What I would like to do is setup a phone with a primary line that is only capable of making internal calls within our organization, and set a few speed dials that can call outside in the local area code for on-call techs. From what I see speed dials can't be set to a specific CSS, which leads me to believe that phone will just use the CSS of the primary line when making speed dial calls.
The question is, is this possible without messing around with custom CSS's and route patterns?

No, as you have seen, they will use the CSS from the configured DN to make the call, they cannot be configured with a separate CSS

Korean font name in CSS doesn't work

Korean true type fonts have two names, in English and Korean. For example, the default font of Windows 7 Korean version is '맑은 고딕' in Korean, 'Malgun Gothic' in English. In Microsoft WIndows, webpages with CSS which has Korean font name display right font, but in my Mac, Safari does not display right font. If the webpage use both Korean and English names in CSS font section, it works in both Mac and Windows.
For example,
body { font-family: 맑은 고딕; }
It works just in Windows.
body { font-family: 맑은 고딕, Malgun Gothic; }
It works in both platform.
Apple mail also has same problem. I have tested other browsers in Mac and only Mozilla Firefox display the right font.
Is this a some kind of bug?

drshawn wrote:
Is this a some kind of bug?
Probably. Let Apple know via
http://www.apple.com/feedback

Bold in CSS doesn't display in IE7

I have created content using external CSS, the Bold in the
head1 displays properly within Dreamweaver and in Firefox, but not
in IE7. All other styles; font size, color display properly. Any
suggestions?

<head1>...</head1> -- seems it´s a new tag I
never heard of ;-)
I´d do it this way :: changing the CSS to:
#content p.head1 { /* defining a class for a certain
paragraph */
font-weight: bold;
and attaching the class to the paragraph::
<p class="head1">Real Medicine Foundation / Jeevan
Jyoti Health Service Society (JJHSS) <br />
HIV Prevention and Care Program Jhabua, Madhya Pradesh,
India
</p>
works better ?

CSS: doesn't line up in F/fox

Similar Messages

Maybe you are looking for