PDA

View Full Version : some fresh eyes..


rjwortmann
10-03-2013, 11:07 PM
I've been trying to find out what is causing my webpage to be (a little) out fo sink lately. Ive made some, minor, changes but my index page does not seem to display the page correctly.

I use the same CSS style sheet for both pages, you can find them here:
rwortmann.com/index.php and rwortmann.com/work.php
It was all ok yesterday but i've tried to find out what went wrong since this morning.

Especially IE is not working for me.
You can see at the left center div=leftcol is about 5pixels off to the left as well as to the bottom.
AS i said the CSS is the same for both pages.

MAybe a fresh pair of eyes can help me out here?

CSS is attached.

I have forgotten one more thing:
In Chrome the index page is correctly diplayed as in: centered. However in IE its not.
How is that possible when again the same CSS code is called upon...?

domedia
10-04-2013, 08:35 AM
The CSS file is not here, but it doesn't really matter. CSS by itself does nothing. 8)

Do you have a link or can you make one?

rjwortmann
10-04-2013, 11:35 AM
The links are in the initial thread.
rwortmann.com/index.php
rwortmann.com/work.php is the one that does work better.

rjwortmann
10-04-2013, 01:13 PM
CSS code:
http://rwortmann.com/stylesheets/style.css

jmichae3
10-09-2013, 05:48 AM
have you hit F5 to refresh the page? what about ctrl-f5?

jmichae3
10-09-2013, 05:52 AM
what version of IE (makes all the difference!) ie6 doesn't conform to too many later standards and has quite a lot of quirks and broken things. ie7 is better,but similar. ie8 has SOME html5 support, and 9 is better at this, and 10 is better still, but nobody has conformed to the full w3c TR for HTML5 yet, and CSS3 same thing,nobody has implemented all (like calc() and attr() are missing on many browsers).

jmichae3
10-09-2013, 06:50 AM
[23:07:04.024] Unknown property '-moz-background-size'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:154
[23:07:04.025] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:219
[23:07:04.025] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:220
--
[23:08:47.862] The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.


in IE8 there is a blue "link" border around the flags. in ff there isn't.
in your css

you are coding your XHTML wrong. img doesn't have a close tag,it is a void element (singleton).
so you should close it with /> like this <img ... /> that's the way you close singletons in XHTML and XML (but not in HTML, no / needed)
same with meta, br, etc. see http://jesusnjim.com/web-design/web-standards-and-references.html and especially http://www.whatwg.org/specs/web-apps/current-work/complete/syntax.html#void-elements

a (anchor/link) elements are not allowed directly within ul. only li is allowed.

I think your page is failing HTML validation.

I suggest you run it through the w3c html validator at http://validator.w3.org before you start trying to fix your css, nothing will look right until you do.

also note that you don't want to use XHTML because IE8 and below (not sure about later versions) doesn't recognize it, it doesn't know what to do with XHTML and I think treats it like HTML and generally gets confused. avoid XHTML! use HTML5 or HTML 4.01.

in XHTML, avoid the & character if at all possible (like you used in your filenames!). in fact, avoid punctuation and spaces in general in filenames except for - and the period (.).
otherwise, you have to escape those characters.

HTML/XHTML comments must have only 2 -'s you can put a space after <!-- and before --> if you need more -'s.

jmichae3
10-09-2013, 06:51 AM
learn more about browser differences for instance, and their js implementation differences.

this will help with coding for cross-browser compatibility/viewing. also, try to learn the syntax of HTML by trying to read some books.
an especially helpful start is a rather old standard, HTML 4.01, I like the reference "hip pocket guide to HTML 4.01" it's concise, has excellent examples, and makes good reference material. you can buy it for $1 on amazon.com approximately.

jmichae3
10-09-2013, 07:11 AM
try adding
#English {border-style:none;}
#Dutch {border-style:none;}

XHTML if you don't get it exactly right it won't work or will error.
but if you want to target IE, again, avoid XHTML.

those probably 4 pixels are coming from the border (1 on each side of both flags.
the browser box model adds the border to the "box" of the image.

if you didn't know, I just found out the hr element is implemented as a border. so you can do some fun and colorful things with it...

krzy
10-25-2013, 08:39 AM
[23:07:04.024] Unknown property '-moz-background-size'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:154
[23:07:04.025] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:219
[23:07:04.025] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://rwortmann.com/stylesheets/style.css:220
--
[23:08:47.862] The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.


in IE8 there is a blue "link" border around the flags. in ff there isn't.
in your css

you are coding your XHTML wrong. img doesn't have a close tag,it is a void element (singleton).
so you should close it with /> like this <img ... /> that's the way you close singletons in XHTML and XML (but not in HTML, no / needed)
same with meta, br, etc. see http://jesusnjim.com/web-design/web-standards-and-references.html and especially http://www.whatwg.org/specs/web-apps/current-work/complete/syntax.html#void-elements

a (anchor/link) elements are not allowed directly within ul. only li is allowed.

I think your page is failing HTML validation.

I suggest you run it through the w3c html validator at http://validator.w3.org before you start trying to fix your css, nothing will look right until you do.

also note that you don't want to use XHTML because IE8 and below (not sure about later versions) doesn't recognize it, it doesn't know what to do with XHTML and I think treats it like HTML and generally gets confused. avoid XHTML! use HTML5 or HTML 4.01.

in XHTML, avoid the & character if at all possible (like you used in your filenames!). in fact, avoid punctuation and spaces in general in filenames except for - and the period (.).
otherwise, you have to escape those characters.

HTML/XHTML comments must have only 2 -'s you can put a space after <!-- and before --> if you need more -'s.

something useful for me..