PDA

View Full Version : website viewing differently on seperate browsers


robbieporter85
01-07-2011, 03:21 PM
Hello!

I just finished and uploaded this website: http://www.gillianmurray.com/

I made it with dreamweaver on my mac & it works fine on Firefox and Safari but when viewed on Internet Explorer the 'About Me' page is all over the place, and the <p> tags look different...

Does anyone know how I can fix this?

Is there a CSS reset I could use?

thanks,
robbie

Corrosive
01-07-2011, 03:25 PM
I'd imagine IE isn't liking your paragraph tags being p1, p2, p3 etc. Any particular reason you've done that?

robbieporter85
01-07-2011, 04:33 PM
no, what would be better?

d a v e
01-07-2011, 05:46 PM
paragraphs are just
<p>this is the first paragraph</p>
<p>this is the second paragraph<p>

also your text is far too small and needs way more line-height

try
p {line-height:1.4;} in your style sheet

ah i see why you've used p1, p2 etc - you need to assign an id to the div or paragraph so

<p id="3">

or <div id="4">

d a v e
01-07-2011, 05:48 PM
css reset
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

and you have a lot of errors in your html

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gillianmurray.com%2Findex.htm l

(remember ids are unique to each page so you can only have one id="cream" for example

Corrosive
01-07-2011, 05:50 PM
Yes, I guess you got the numbering from headers (h1, h2, h3 etc). They are numbered to show importance on the page but, as d a v e says, paragraphs are just paragraphs.

gentleone
01-07-2011, 06:48 PM
ah i see why you've used p1, p2 etc - you need to assign an id to the div or paragraph so

<p id="3">

or <div id="4">
ID's or classes can't be only numbers or start with a number.

d a v e
01-08-2011, 08:11 AM
ID's or classes can't be only numbers or start with a number.
<blush>of course i knew that but in moment of madness completely forgot! thanks for picking up on that gentleone</blush>

gentleone
01-08-2011, 11:28 AM
<blush>of course i knew that but in moment of madness completely forgot! thanks for picking up on that gentleone</blush>
I knew it might be a little blackout, Dave... We all have them sometimes :)

robbieporter85
01-08-2011, 12:58 PM
thanks, this is super helpful, i'm going to give all my numbered <p> tags a class and see how it goes...

thanks for all your help, i'm still learning!

Ricky55
01-08-2011, 01:54 PM
Often times you don't need to give p tags a class or ID. If you document is well structured that you should in most cases be able to use a descendant selector to get to the p tag.

I see people all too often using classes and ID's when they're not required.

gentleone
01-12-2011, 08:34 AM
I agree with Richard. To style tags you actually don't need classes at all. It can be quite tricky at the beginning if you work like that, but the result is a much more cleaner HTML.

For instance if you want to style an anchor tag in the 5th list item of an unordered list that is in a div id="aside" you can do it simply like this:

div#aside ul li + li + li + li + li a {styles here}

And besides pseudo-classes like a:link or p:first-child you can also use pseudo elements or attribute selectors to target specific elements/tags.

http://www.w3schools.com/CSS/css_pseudo_elements.asp

http://www.w3schools.com/CSS/css_attribute_selectors.asp

Ricky55
01-12-2011, 04:12 PM
Attribute selectors are very powerful but do take some remembering I find. Taking advantage or rel and title in your links can provide attribute selectors with great hooks.

That's what I love about web design, the more you learn the more you realise how little you know and have still to learn.

I like your view on web design Gentleone, you're right on the money with your views IMO.

gentleone
01-12-2011, 10:37 PM
thanks for the heads up, Richard... and you're right about being a web worker... you think you know so much already, but actually it is very little and it gets more and more what we have to know... CSS media queries :confused:

There is guy that do awesome stuff with pseudo-elements... one of his experiments is gui icons made pure out of CSS (with a little help of CSS3 ofcourse), but still.

http://nicolasgallagher.com/pure-css-gui-icons/

Chris from CSS tricks just had an interview with him.