Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello,
I am trying to learn how to make my website with css, but I am having some problems with the different browsers.
In Firefox I get it right, but with IE 6.0, the navigation menu on the left becomes way wider than it should.
What should I do? Which part of my css is the problem there? Is there a place where I can learn more about cross-browser compatibility?
Here's the file:
[link removed]
Thank you for your help! -
The position is everything website is good for explaining different browser bugs. This is the IE page..
http://www.positioniseverything.net/explorer.html
or try
http://tantek.com/CSS/Examples/boxmodelhack.html
or it could be that different browers are giving your list different padding/margins and if you specify then it will be the same on each brower.
(I haven't looked at your code - I am guessing from looking at your message!) -
Use an exact pixel value for your navigation links instead of a percentage. So instead of 'width:100%;' for '#navigation ul li a', set it to 'width: 82px;' (that's the width in Firefox) and you'll have the same width in both browsers.
-
I haven't looked over your code much, but I would recommend adding global padding and margin settings in your file:
* { padding: 0; margin: 0; }
Without that, different browsers, most noteable IE, will have different default paddings and margins. This way, you set the all to zero. -
I second egon's tip. I've lost count of the number of times it took me to realize that zeroing out padding and margins saved headaches later down the road. It's a good idea to start with a blank canvas that looks the same in most, if not all, browsers. (Ha. Does that make sense? I hope it does.)
-
Thanx for all the tips!
The 82px thing solved the problem with the button-width!
And the * { padding: 0; margin: 0; } was interesting too : ) -
Hello again!
I know this must be a silly question again, but I don't really know what to do to get my page to display almost the same in different browsers. By the moment I am just checking with FF and IE.
The main problem I'd like to know how to solve now, is that I get different font sizes (IE displays it larger) and that IE adds extra margins between the navigation and content.
Thanx if u take some time to help!
Btw, the link is the same as before: [link removed]
note: if this is not the right place to ask for these questions, please give me directions for better questions? Thanx a lot! -
Set the body font size to 76%, and then set the font size of other elements in ems.
More info at http://www.thenoodleincident.com/tutorials/typography/ -
I always thought 62.5% was a more popular figure setting the global font to 10px. I guess it really doesn't matter though.
-
-
CommentAuthoradjustafresh
- CommentTimeApr 24th 2006
Careful. The font size nazis will come down on you hard if you don't set the font size on the body element in your master CSS file to 100%. They also tend to insist that people use the small, large, larger, etc. selectors in the style sheet.
Many of these people tend to crank their default font size in their browser down, then take screenshots of how small your font appears in their browser and send them to you. -
-
Hey! Thanks for helping with the font size issue. I think I already got that right with the "x-small" keyword.
In fact, who knows, because I am starting to get a little bit confused having to keep so many browsers in mind. I just can't check them all!
I wanted to ask you a couple more questions about problems I found:
The file : [link removed]
The problem: [link removed]
1. I have this News box (in the middle column) with a picture floated left. But the box doesn't grow enough in height to keep the picture inside it so it shows below the box border (I can't explain it quite well sorry, there is a picture of the problem above to make it clearer). This happened on FF 1.07 so I guess it has something to do with older browsers? In IE 6.0, FF 1.5 and opera 8.54 it came out fine. (All of them on WinXP)
2. I have a <p> text and inside of it I placed a <span> which floats right. The problem is that I want it to stay in the same line as the <p>, but it only does in Opera, not in IE, not in FF. ¿Does anybody know why is this and/or how to fix it?
Here's the file:
[link removed]
The span that I want to align on the right is the "[+] Seguir leyendo" thing.
Thank you for your time!! -
@zmh:
Ad.1:
If you wish the floats to have influence on height of the container block, you should add overflow: hidden; to it (to the container block that is).
Ad.2:
I may be mistaken but I think that both Firefox and IE got that right. Yet, IMHO it looks better this way. -
About the 2. question I asked yesterday, maybe I didn't explain it good enough.
So here I have this:
A. See the date stays in line with the header, so does the [+] seguir leyendo, that stays in line with the <p>
[link removed]
B. Firefox and IE display them in separate lines
[link removed]
Is there a reason for this?
@nbw:That was it! The 'overflow:hidden' solved the 1st problem! thanx
but...
1. Now I get a little odd thing.
In Opera browser I get this: [link removed]
In Firefox 1.07: [link removed]
Now, it doesn't show the margin that should be seen below the image and though I've tried, I can't get to understand why it does so. -
- CommentAuthordamienbuckley
- CommentTimeMay 9th 2006
Worth adding border:none to the padding and margin zeroing IMO -
Back to the font size issue, check out the new Fonts CSS component of the Yahoo! UI Library.
-
@damienbuckley: I don't understand this thing about adding border: none to the padding? How do I do that? What is it for? : S I am a little confused here!
@JohnRiv: thanx for the link!
Btw, I think I found a way to display an <h*> and a floated <span> in the same line:
My html used to look like this:
<h2> header </h2> <span>date</span>
And now I do:
<span>date</span> <h2> header </h2>
So the span floats right and the title stays in the same line!
--Just wanted to tell in case it can be useful to someone : ) -
-
CommentAuthorDarren Hoyt
- CommentTimeMay 12th 2006
You can also put the span inside the h2 to keep them on one line:
<h2>Whatever <span>whatever</span></h2> -
1 to 17 of 17