SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Jun 16, 2006, 20:13 #1
H1 rendering b/t MSIE and Firefox
I have noticed that each time I define and utilize <Hn> tags, that Firefox places padding across the top of the line of copy enclosed in the <Hn> tag. MSIE renders the tag w/out issue. The following is the <div> created for this section of copy on my page:
#pageTitle {
position: absolute;
visibility: visible;
z-index: auto;
width: 100%;
top: 10px;
text-align: center;
left: 0px;
}
#pageTitle h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #FFFFFF;
}
Any ideas on what can correct this rendering difference with Firefox?
Thanks in advance for all help provided.
-
Jun 16, 2006, 20:26 #2
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:h1 { padding: 0; margin-top: 0; }
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Jun 16, 2006, 20:52 #3
Just what the Dr. ordered - thank you!!
-
Jun 16, 2006, 21:18 #4
-
Jun 16, 2006, 22:00 #5
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
lplatz, you're welcome
drhowarddrfine, you've never heard that saying before?We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Jun 17, 2006, 10:27 #6
- Join Date
- Jan 2004
- Location
- Melbourne, Australia
- Posts
- 7,305
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
It's not an issue. If you're going to rely on browser-default styling, expect differences like this to pop up.
I recommend setting the margin/padding to 0 for all elements at the top of your style-sheet:
Code:* { margin: 0; padding: 0; }
-
Jun 21, 2006, 11:06 #7
Speaking of lists - the outcome of adding
* {
margin: 0;
padding: 0;
}
to my css, is that my indent for <ul> items has adjusted left.
I attempted to counter and adjust the <ul> by adding
ul {
padding: 10;
margin-left: 0:
}
No luck - Firefox and MSIE continue to render the list differently.
Thanks in advance. Les
-
Jun 21, 2006, 12:16 #8
- Join Date
- Jan 2004
- Location
- USA
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Perhaps you should be controlling the <li> element instead with your CSS?
Just a thought.
-
Jun 21, 2006, 14:13 #9
- Join Date
- Sep 2005
- Location
- Zurconion Soon!
- Posts
- 1,549
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by lplatz
Code:ul li { padding: 10; }
Code:padding: 5px 0px 5px 10px; /* In English (Clockwise)- Padding: Top Right Bottom Left */
-
Jun 21, 2006, 17:27 #10
Path of least resistence
incorporating everyones input led me to discover that using the universal
* {
padding: 0px;
margin: 0px;
}
somehow had an uncorrectable impact on list items (<ul><li>). The margin for list items in MSIE and Firefox were not even close.
I commented out the universal css, and added
ul li {
margin-left: 0px;
}
This provided the cross-browser consistency I was aiming for.
Thanks for all your input, it definately shortened my research time on this cross-browser inconsistency - - Les
Bookmarks