I'm just wondering if IE 9 has a way to do something similar to Firefox where I can select the "Inspect" option under the Web Developer menu and then see which css classes are being applied to each element on my page.
I did notice in IE 9's F12 feature, I can select "View" -> "Class and ID Information" but it doesn't show me the css details.
My problem is that my site looks completely different in IE than in FF and I'm trying to debug. Any other suggestions would be appreciated.
Thanks.
EDIT 1:
The specific problem is that in FF I have a left and top margin so that all content is centered. However, in IE everything is left justified. I decided to start looking at the first div of the page because even that's appearing differently.
There are several divs nested within each other but I think I may have found the culprit.
In IE, the css for one of the divs looks like this:
#regionHeader .wrapper {
overflow:hidden;
}
.wrapper {
margin:0 auto;
max-width:1140px;
min-width:801px;
width:auto;
}
.wrapper {
margin:0 auto;
}
.wrapper {
margin:0 auto;
}
.wrapper {
zoom:1;
}
.wrapper:after {
clear:both;
}
.wrapper:after {
display:table;
}
.wrapper:before {
display:table;
}
div {
-webkit-text-size-adjust:none;
border-bottom:0;
border-left:0;
border-right:0;
border-top:0;
margin:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
But the same in FF has the following style:
#regionHeader .wrapper {
overflow:hidden;
}
.wrapper {
margin:0 auto;
min-width:320px;
}
.wrapper, .clearfix, #content {
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, figure, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
margin:0;
padding:0;
}
Notice the max-width:1140px; in IE vs FF which only has a min width. Would that be causing the problem? Unforunately, this is not my code...
Press F12, click the pointer button in the toolbox, click on the element you want to inspect. The css for that element should be to the right of the dom-window. If it isn't, you may click on the "Style" button above the right window.
Firebuglite is compatable with IE6+ and can be downloaded here:
https://getfirebug.com/firebuglite
Hit F12 to bring up the IE9 Developer Tools.
Or select TOOLS - F12 DEVELOPER TOOLS
Related
Hello I'm just starting with css and I see people in videos and such already have css code written before they write a single line of code like:
body {
padding:0;
margin:0;
}
this is like a really simple example they write like body,div,table..etc like the a:active and stuff like that but like in like really long code they even add a selected attribute so when you selected any words on the page the background and color changes I know this depends from one developer or another but is there a really basic piece of code that I can start with?
People prefer different ways of working with CSS, there is no right or wrong way. But there is certainly ways to get a good head start with your browser resets.
There are a few ways to play it, you can either use a reset or normalise your code to fit the different browsers.
A reset will make everything behave in streamlined way across each browser, whereas normalising your css will make browsers render all elements more consistently and in line with modern standards.
Rememeber there is no right or wrong way to approach this.
Eric Meyes CSS Reset
Normalize.css
it is all just style and opinion, but this is often used and resets just about everything (so you'd have to create all your styles yourself, instead of using browser defaults).
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
I'm using the tinymce wysiwyg for creating some nice looking instructions for my website.
I simply save the html generated code into my database, and display that html on a page.
Since my website has it's own stylesheets loaded, some things tend to show up according to what the styles dictate (like <ul>, <li>, or <p> tags)
If any of those tags are generated from tinymce, my site's stylesheets will style them.
Shot in the dark - Is there a style that makes a browser ignore all styles that reside inside a specific element?
For visual aid, here is a snapshot of the tinymce and what I'm making:
And here is a snapshot of the displayed html, on my site:
(this html resides inside <div id="tinymce_html"><?php echo $tinymce_html; ?></div>)
Here's the css that's affecting it (site-wide), inside the main.css stylesheet
ol, ul {
list-style:none;
padding: 0;
margin: 0;
}
Btw, I'm only giving an example of just the result for the <ul> tags. I'm sure I'll run into plenty more tags. (hence my original question - "is there a style that makes a browser ignore all styles that reside in a specific element?")
What I don't want to do is create an entirely new style sheet for anything related to tinymce, or other html I'd like to display without being affected by any site styles.
Use always a "reset css" before start new project!
Take a look at this.
Copy paste this style above your code and start from this. It reset all your elements.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Looks like you want to apply a css reset stylesheet.
Have a look here and take the one that seems the most applicable to you.
You will have to add this css to the editor using the custom_css tinymce config option.
I made a website that looks perfect on Internet Explorer, but when it is loaded with Firefox, certain elements are out of alignment.
For example, a p tag that would appear on the coordinates 20, 20, would appear in firefox on the coordinates 20, 40. For some reason, firefox changes the 'top' attribute of my p tags, such that they appear "lower" in firefox, than in ie. Please note that the 'left' attribute' remains unhindered, but the value for the 'top' (or y coordinate) is increased by about 20 pixels, everytime!
I would like to know why my P tags appear in their proper locations in Internet Explorer, but are lower in firefox?
Below is the code I used for each p tag. If you were to use this same code in a web page, you would see clearly that the p tag appears lower in firefox, than in i.e. everytime.
p.myparagraph
{position: absolute;
left: 20px;
top: 170px;
width: 20px;
height: 19px;
background-color:0033dd;
}
Why are my p tags appearing 30 pixels lower in firefox, than in Internet Explorer?
Each browser has its own CSS applied by default. To counter this, it is good practice to use some sort of CSS normalization (as pointed out by #You) before applying custom CSS. CSS normalization is recommended over an outright reset because it
Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Source: Normalize.css
Also, do check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.
If not that, you could use a basic CSS reset,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Source: http://meyerweb.com/eric/tools/css/reset/
Try using a reset stylesheet then styling everything yourself.
My reset stylesheet styles a ton of tags (including P) with vertical-align: baseline;
That might help.
I've got an issue which i've never had before up until this site and i can't figure out the problem.
I build my sites with a wrapper set at 100% width; and a container set at 960px with a margin of '0 auto' to center the container.
Most of the time (and as with this one) i have a header wrapper/container, main content wrapper/container and footer wrapper/container.
In addition, my body is set to 100% width and height.
The problem is my header wrapper is causing a very small scroll to occur, and when i scroll right to see, the entire right of the page seems to have a 20 pixel margin.
I don't seem to get the problem in Chrome, just IE and Firefox.
My CSS is cleared with this at the beginning:
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
My main body style is set as:
body {
float: left;
font-family: 'Verdana', 'Arial';
background: #E3E3E3;
width: 100% ;
height: 100%;
color: #5B5B5B;
}
I'm a bit embarrassed to ask this as CSS bugs are normally a breeze to get through, but i've no idea with this. As for the other wrappers, as i mentioned, they're all set as:
wrapper { float: left; width: 100%; height: 100%;}
content {width: 960px; margin: 0 auto; }
Any ideas? It's driving me insane!
Try resetting you css first. This is what I use to start my main stylesheet:
* {margin:0;padding:0;outline:0;border:0;
-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th,
td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
You need to reset styles before you can troubleshoot bugs like this. Then it's a breeze...
Since the space causing the scrollbar is empty, you could just force that section to never show a scrollbar with--
overflow: hidden;
Then you can get on with the project & come back later to figure out what's causing it if you want to.
Why is my text being cut off in IE7 and Firefox from left side ? it looks OK only if i add padding-left:1px? why it's happening? I' can't give live link of site.
see problem in this screen-shot alt text http://easycaptures.com/fs/uploaded/458/3132736693.png
letter "W" being cut off from left side.
CSS code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, ins, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td
{
border:0 none;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;}
body {font-family:Arial,Helvetica,sans-serif;
font-size:62.5%;
line-height:1.2;}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;}
.home-boxesContainer ul {
font-size:0.9em;
margin:auto;
overflow:hidden;
width:90%;}
.home-boxesContainer ul li {
background:transparent url(Images/dot-grey.gif) repeat-x scroll left bottom;
float:left;
line-height:16px;
margin:10px 0 0;
overflow:hidden;
padding-bottom:5px;
padding-right:10px;}
.home-boxesContainer ul li a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(Images/arrow-green.gif) no-repeat scroll right center;
color:#6CB025;
padding-right:20px;
text-decoration:none
}
This is an issue with certain fonts on windows, specifically Verdana, from my experience. I spent about three days looking for float bugs and such to solve this, three years ago. It occurs mainly with the capital 'w' character, but can also be a problem with 'v' too, and only with cleartype disabled.
The best solution is to use text-indent:1px; on your paragraphs, if you feel you need to implement a fix.
I can't see well on your screenshot, but I think its the font issue, try with different font.
I suspect there can be three reasons:
The container of your menu is pushed there to left making text that way
It may be font issue too (this happens sometimes due to fonts)
Try adding line-height to your list.