Cross Browser CSS problems
- Thread starter mjrzasa
- Start date
Sometimes it is because I want to move a logo up, but in this case, I want to add just 2 px horizontal lines (<hr>) to a header. And when I use the <hr> normally, it leaves a space under it, so I have to start it underneath where I want it and move it up from there.
Also, different question, but what are things you need all web pages to start with? I know:
* {margin:0;padding:0;} so that there is no space outside you container
body {text-align:center;} so that the page centers on the screen
.container {text-align:right;} so that text is not center aligned
Am I right, and what else?
Another side question: I have a "logo" class div, inside my "header" div, and in my logo div, I simply have the one image, but it will not show up while it is inside the "logo" div. If I delete the "logo" div and just leave the image inside the header div, it is fine, but then how do I margin the logo? I get the feeling by going through this that the "header" div background color may have something to do with it...
Thanks guys for helping.
Also, different question, but what are things you need all web pages to start with? I know:
* {margin:0;padding:0;} so that there is no space outside you container
body {text-align:center;} so that the page centers on the screen
.container {text-align:right;} so that text is not center aligned
Am I right, and what else?
Another side question: I have a "logo" class div, inside my "header" div, and in my logo div, I simply have the one image, but it will not show up while it is inside the "logo" div. If I delete the "logo" div and just leave the image inside the header div, it is fine, but then how do I margin the logo? I get the feeling by going through this that the "header" div background color may have something to do with it...
Thanks guys for helping.
Last edited:
Body text-align center wont centre your page, at all, it will centre your text, then your container with text align right will right align your text, if everything is contained within your container, the centre alignment will be redundant.
Margin:0 auto; with defined width on container will centre your page.
(as long as its not absolutely positioned!)
Margin:0 auto; with defined width on container will centre your page.
(as long as its not absolutely positioned!)
IIRC, that was an old page centering trick for IE<=7.
That's <= to you, sir.
Wasn't condoning the practice. Just remembering the days when I was first starting out *shudder*.
Even if you are avoiding html5, for some reason, this site is a great one to get an idea of a lot of tips and tricks that designers have come up with to overcome differences across browsers.
http://html5boilerplate.com/
Hope that firehose helps.
Gotta disagree, though I grasp what you're trying to say. If you're doing it because things aren't lining up, then yeah, you're wrong, but if you're doing it to intentionally shift something out of its normal boundaries...
Not bad thinking, though I suspect the problem is deeper than that...
There are many charts running around that show support for various features, but I haven't come across a definitive feature list comparison for the major browsers.
Yes exactly as you have a fairly decent grasp of css where as most tend to attempt negative values first to correct layouts that are not obeying for other reasons.
saber mogaddas
New Member
use css reset in css..
for example :
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;
}
for example :
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;
}
So the only thing you need for a centered website in Mozilla and IE is "Margin:0 auto 0 auto;" for container? I use "width:100%" for my container, right? but "width:960px" for my body/nav/etc.
Also, I haven't found an answer to the negative value, so ill post a few pictures.
Dang, so the image is small, but I have a few horizontal lines on the header, 2 px size in the middle gray box, but I use <hr> so it creates a space below them because <hr> starts a new line. This is the code I was using to let me get it working:
<hr style="color:#333333;height:2px;margin-top:-6px;">
<hr style="color:#333333;height:2px;margin-top:-17px;">
To move the lines from the 3rd header box, up to be in the middle box, make sense?
Attachments
Last edited:
anything you can suggest guys?
This what is happening now... and why does <hr> show in IE but not Mozilla... GAH!
http://home.comcast.net/~mjrzasa/test.html
This what is happening now... and why does <hr> show in IE but not Mozilla... GAH!
http://home.comcast.net/~mjrzasa/test.html
Last edited:
I've been working on this a bit and almost done. I have a few problems though.
1) Where I wrote "test text" if nothing is there, it is just an empty bar going across the screen there, in white (and will change colors with the body:background-color:COLOR CSS).
2) The lines in the header and footer that I added are completely screwed up in IE. I have found nothing that works, I tried <hr>, <div>, now <img>, but they all add spaces underneath themselves. My last chance that I know of is to just make the entire header and footer a background image all together, but I have been trying to use as little images on this as possible.
If someone could look into my "view source" and see if I'm screwing up somewhere, that would be great. I have been going over all my code and cant find what will help, other than possibly filling in the "billboard" and "main" with content, but still that didn't seem to work when I tested it.
http://home.comcast.net/~mjrzasa/test.html
Thanks.
1) Where I wrote "test text" if nothing is there, it is just an empty bar going across the screen there, in white (and will change colors with the body:background-color:COLOR CSS).
2) The lines in the header and footer that I added are completely screwed up in IE. I have found nothing that works, I tried <hr>, <div>, now <img>, but they all add spaces underneath themselves. My last chance that I know of is to just make the entire header and footer a background image all together, but I have been trying to use as little images on this as possible.
If someone could look into my "view source" and see if I'm screwing up somewhere, that would be great. I have been going over all my code and cant find what will help, other than possibly filling in the "billboard" and "main" with content, but still that didn't seem to work when I tested it.
http://home.comcast.net/~mjrzasa/test.html
Thanks.