logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-04-2013, 12:07 AM   #1
rjwortmann
 
Join Date: Sep 2013
Posts: 10
Default some fresh eyes..

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...?
rjwortmann is offline   Reply With Quote
Old 10-04-2013, 09:35 AM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

The CSS file is not here, but it doesn't really matter. CSS by itself does nothing.

Do you have a link or can you make one?
domedia is offline   Reply With Quote
Old 10-04-2013, 12:35 PM   #3
rjwortmann
 
Join Date: Sep 2013
Posts: 10
Default

The links are in the initial thread.
rwortmann.com/index.php
rwortmann.com/work.php is the one that does work better.
rjwortmann is offline   Reply With Quote
Old 10-04-2013, 02:13 PM   #4
rjwortmann
 
Join Date: Sep 2013
Posts: 10
Default

CSS code:
http://rwortmann.com/stylesheets/style.css
rjwortmann is offline   Reply With Quote
Old 10-09-2013, 06:48 AM   #5
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

have you hit F5 to refresh the page? what about ctrl-f5?
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 10-09-2013, 06:52 AM   #6
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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).
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 10-09-2013, 07:50 AM   #7
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

Code:
[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-...eferences.html and especially http://www.whatwg.org/specs/web-apps...#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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 10-09-2013, 07:51 AM   #8
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!

Last edited by jmichae3; 10-09-2013 at 08:18 AM.. Reason: needed rewording
jmichae3 is offline   Reply With Quote
Old 10-09-2013, 08:11 AM   #9
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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...
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 10-25-2013, 09:39 AM   #10
krzy
 
Join Date: Oct 2013
Location: Poland
Posts: 51
Default

Quote:
Originally Posted by jmichae3 View Post
Code:
[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-...eferences.html and especially http://www.whatwg.org/specs/web-apps...#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..
krzy is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:04 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com