I have a div : <div id="fancyboxID-1">
<p>0767380042</p>
</div>
and this css:
#fancyboxID-1 p { font-size:150px; text-align: center; line-height:150px; overflow:hidden;}
After I upload and refresh the website I don't see any changes but if I check the source code: I see the css properties.
It's very strange for me, I've tried to upload on another server and there it works.
Any ideas why this is not working ?
Looking at your stylesheet (style.css) there appears to be some strange characters (corruption / unicode?) before your problematic line which is probably invalidating your stylesheet. Removing these characters results in your styles suddenly bursting to life...
When viewed with ISO-8859-1 encoding, they appear as 4 visible characters, although if viewed as UTF-8 it just looks like a single space (although it's not a single space):
​ #fancyboxID-1 p { font-size:150px; ...
(Btw, hyphens in the id/class names are perfectly valid.)
Are there any other styles\sheets that are overriding these changes? You said it works on other servers, so there must be something specific to the server youre hosting from.
If you use developer tools (F12 in IE or Chrome, Firebug in FireFox) you can browse to see if the changes are actually applied.. the code being present only means those styles are available, but something else might be enforcing different rules against that div, p, etc.
Related
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I'm using Joomla 3 and I created a blog site, I'm using a design-controll tamplate
I created a "new-article" page, but I noticed that some of the buttons don't have text in them, when I checked with firebug I discovered there's a font-size:0 on them, when I remove the V from it in firebug it displays the text. I found the file and the line and deleted ALL the font-size: 0px; lines, the simply don't exist in the file, yet the text is still invisible, and when I check Inspect-Elemnt it still shows
how it looks now:
how it looks when I remove the V from font-size:0 (and how I want it to look)
it seriously drives me NUTS
and here's the file as you can see line 2875 is EMPTY
I tryed checking on different browsers and different computers, still the text is invisible and Inspect Element shows font-size: 0px;
here's the link to the page (it's public now, later on it's supposed to be a members only page)
http://debutinvest.com/new-article
you can overwrite this in your css by adding following, that will overwrite the font-size:0px;
.btn-toolbar{
font-size:12px !important;
}
Hope this helps
It would be best to provide a link so that we can inspect ourselves.
You can also look for a text-indent with a negative value, typically something like -999.
I have this title on my page:
<h2 style='color:#33bbff;'>Los Angeles, <span style='font-size:10px;color:black;'>Unites States</span></h2>
As you see I want the country to be a different color and size from the city. Now, I've done similar things probably a hundred times, but for some reason the span styles aren't applied here - the country looks just like the city. What am I doing wrong?
I tried writing the styles like h2 span { ... } instead of doing them inline, didn't help.
Your code appears to be fine (see here).
Perhaps you've cached the old version. In your test browser, hit CTRL+F5 to force a reload of all files.
Otherwise, try checking if you've made use of the !important; to force a style and ignore other styles.
Debug it by using a Developer Tool Bar e.g. FireBug, and trace the styling applied, maybe something else is overriding the style. ( http://jsfiddle.net/unVNN/ )
There is no mistake, simply delete cash in your browser, CTRL+F5
I understand that elements can have multiple classes:
.rfrsh-btn {
background-image:url(../../upload/rfrsh_nb_grey.png);
...
}
.submit
{
font-size: 0.85em;
padding: 0;
}
This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.
But for some reason this <button> element doesn't seem to want to display with a background image and styles applied.
Is there a reason for this? Or am I codeblind and doing something wrong.
I can't use ID either as it's repeated many times on the page.
Thanks all :)
There are several reasons. For instance, it's quite possible your image path is not correct. It 's worth noting that paths in CSS are relative to the .css file 's location, and not to the including page.
To better understand what's going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.
For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/
Underscores in class names can cause issues. Try renaming rfrsh_btn.
https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names
My boss's clients are complaining that when some HTML newsletters are forwarded, their table-based layout breaks. I have determined that this is most likely caused by using the following option in Outlook:
Tools > Options > Mail Format > Use Microsoft Office Word 2003 to edit e-mail messages
My boss refuses to change this option and is demanding that I figure out a work-around. But I'm plain stumped. The e-mail that is breaking when forwarded with this option on is at http://www.egusts.com/stratham/stanford-square/10-0826/new/
Here's what happens when the Word 2003 HTML editor is done with it. No edits, just hit "forward" with that option selected - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/
Here's an example that my boss forwarded me that makes it through just fine - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html
But I'm still really stumped. I have no clue what to do. I had thought my original template's table-html was really simple and straight-forward. What's breaking in the Word 2003 Editor? Why? Is it stripping some tags? Adding some tags that screws it up? Is there anything I can do?
I'm at my wits end! Thanks for the help
Unfortunately, forwarding an email causes one client to re-render HTML that has already been rendered, and this will almost always screw something up. However, using better practices when coding your emails will help cut down on these problems. I've done a lot of emails and here are some things I've learned:
Never use rowspans or colspans. These tend to break down quickly across email clients and when forwarded. Instead use nested tables.
If you have a bulleted list, use either an unordered list (ul), or if you must use a 2 column table with a row for each list item and put the • in the first column for each item.
Stay away from p tags, they have inconsistent spacing across email clients. Using 2 br tags can give you roughly the same amount of space.
Use padding to control the spacing of elements instead of margin. Again, not very consistent, in fact, I'm not sure it works at all.
Super scripted elements will usually push the line they are on down (or the lines above up). Use an inline-style of line-height:0; to fix that. Note, however, this will still happen when forwarded. If you're using footnotes and need to superscript just a few numbers, use the HTML entities ¹ , ² , and ³.
Background images are not supported in Outlook 2007-2013 for Windows. They seem to work for Outlook Mac, and a lot of other clients, but don't bother with them if you need to support Outlook for Windows.
Find a reliable template to use and always start with that. This should include styles in the head aimed at fixing problems with web, desktop, and email clients. Here are some I usually use:
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
a:link {
color : #1d3666;
text-decoration : underline;
}
a:visited {
color : #1d3666;
text-decoration : underline;
}
a:hover {
color : #a43232;
text-decoration : none;
}
table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table td {
border-collapse: collapse;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
}
a img {
border:none;
display:block;
}
While web clients like Gmail, Yahoo, Outlook.com, and AOL will probably strip the head and any internal styles out of your email, these will come through for most mobile mail client users and for desktop email clients like Outlook and Thunderbird, which are what these styles aim to fix for. For everything else, use inline styles.
Also, it looks like you created this using Fireworks. That might work for a web page, but email has a lot of pitfalls and limitations that FW probably does not account for. I'd recommend either using Dreamweaver or some other helpful text editor and do it using HTML with inline styles.
I figured out that, in addition to using transparent spacer GIFs, I needed to specify a "width" for each of the s that housed the spacer GIFs.
That solved most of the layout problems, although forwarding an e-mail in outlook with that option set injects a lot of other ugly code that can screw things up.