1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Opera VS Explorer&Firefox positioning. What am i doing wrong?

Discussion in 'CSS' started by martincheq, Jun 30, 2009.

0
  1. #1
    Hi. I am pretty new in HTML&CSS, but as far as I know, the web page which I created should work. I have been developing it with Opera, so everything was good there. But in the end, I also checked in FF and IE and noticed that the contact.htm isn't positions as it should be. So I am sasking you, what am I doing wrong, that the elements aren't positioned as they should be. If you're looking them with Opera, they are just as they should be.

    page: martincheq.info/contact.htm

    Huge thanks, martincheq!!
     
    martincheq, Jun 30, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Haven't looked much yet but you are using XHTML end tags, />. Remove the slash. Browsers sometimes end processing at that point.

    Rule 1: Never, ever trust IE to do anything right.
    Rule 2: You are doing. Always use a modern browser to first check your markup.
     
    drhowarddrfine, Jun 30, 2009 IP
  3. martincheq

    martincheq Greenhorn

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Now I've removed these slashes, but then everything just get worse. And after all, in Explorer I get just a blank page .. I am not really sure if deleting all the slashes is a good idea :?
     
    martincheq, Jun 30, 2009 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Putting those slashes in is like airplane wings on a car. People will look at your markup and think wtf? The wings may damage other cars while driving but they do not belong on a car and they do no harm if you remove them.

    Reread Rule 1 above. I'll try and look at this more later today. Please note that Opera and Firefox look better, too, though not correct.
     
    drhowarddrfine, Jul 1, 2009 IP
  5. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #5
    Hi martincheq,

    from my experience you need to check all the different browsers because they have different ways of displaying html/css.

    FF and Opera are often the same along with Crome and Safari.

    IE 6 and 7 are different but IE8 is now showing mostly the same as the ones above.

    The best thing to do is design for Opera and make a separate stylesheet for IE bugs. Then you can call it to your page by putting it in the head tags of your page. The other browsers will ignor it.

    Use this to call it to the page:

    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="IE6.css" />
    <![endif]-->

    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="IE7.css" />
    <![endif]-->

    Where IE6.css and IE7.css are your stylesheets with the fixes for these browsers.
     
    fadetoblack22, Jul 1, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If it were me I wouldn't use positioning and just let the elements flow in their natural order and you can still achieve the same effect.
     
    wd_2k6, Jul 1, 2009 IP
  7. WebDizajnSajter

    WebDizajnSajter Peon

    Messages:
    31
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Martincheq, first of all I suggest you to put in html document above <head> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    Code (markup):
    because this statement is more tolerant.

    Second you use in css file absolute positionig and floating -- left, right --, you have to use only one method. I recommend you float. If you like strict cross-browser compatibility, put something like this in css file, 

    html, body, div, span, p, img, ol, ul, li,
table, {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}
    Code (markup):
    :)
     
    WebDizajnSajter, Jul 3, 2009 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    @WebDizajnSajter,

    That doctype is NOT more 'tolerant'. All it does is tell the validator not to flag deprecated markup as an error. Otherwise, browsers treat the markup exactly the same. It makes no sense for new web pages to use deprecated markup so it makes no sense to use the transitional doctype.

    Therefore, new web pages should ALWAYS use 'strict'. (In addition, it's questionable you should even use XHTML but that's another topic.)
     
    drhowarddrfine, Jul 3, 2009 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    So you know it's also broken in opera 10.

    I'm looking at this, and you really went overboard on the use of positioning, and the markup is a wee bit nonsensical. H1 after all the content and around a non-heading element, manually forcing breaks on elements that should be a dynamic font size and therin will break the layout if they resize (probably why it's broken in Opera and IE on my system since I run large fonts/120dpi), no graceful degradation for images off, etc, etc... The wee bit of XHTML in your HTML probably isn't helping either.

    Though as 'cute' as the centering on the page is, at 600px tall that's not even 1024x768 friendly and will result in the top and bottom getting chopped off - and fixing it in PX is an accessibility /FAIL/ since it means unless you don't mind the layout breaking for lf/120dpi users, you are forced to use the same metric (px) on the font sizes - there's a reason you don't see a lot of websites doing that... much less that 11px is below accessibility norms in the first place. 12px is bare minimum, I get twitchy below 14px - NOT that one should be using px for fonts unless 'forced to' due to an image interaction (like underneath a image replacement) and then you should use px fonts so big nobody would ever complain about them being small (18px or larger).

    You also made the classic blunder - writing your whole layout before testing it cross browser. Write a small section, test in ALL, write a small section, test in ALL. NEVER trust any one browser to render like any other browser - I don't care if it's Gecko, Presto or Webkit - you CANNOT RELY on them behaving the same way... From Opera's handling positioning inside inline-level containers different, to Firefox's GAPING holes in HTML4/CSS2 (which is why I'm pissed they have people working on HTML5/CSS3 - specifications not even out of DRAFT when HTML4/CSS3 have been 'final' for a decade!) or webkit screwing with form elements so badly almost anything involving forms is going to end up looking like ass.

    Let's see... Assuming I was to create a layout like that, first I would chuck the existing markup for something like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Martincheq Arts
</title>

</head><body>

<!--
	empty tags like SPAN and B below are image sandbags for
	sliding doors or glider-levin replacement - do not remove!!!
-->

<div id="pageWrapper">

	<h1>
		Martincheq Arts
		<span></span>
	</h1>
	
	<ul id="mainMenu">
		<li class="portfolio"><a href="portfolio.html">Portfolio<span></span></a></li>
		<li class="contact"><a href="contact.html" class="current">Contact<span></span></a></li>
	</ul>
	
	<p>
		I am free for freelancing. If you have any questions, maybe want to hire me, or anything else, feel free to contact me via my email. You can be sure I will answer you in a day, in extreme ocasions in two most.
	</p><p>
		<a href="mailto:martincheq@gmail.com">martincheq@gmail.com</a>
	</p><p>
		Have a good time!
	</p>
	
<!-- #pageWrapper --></div>

</body></html>
    Code (markup):
    Getting rid of the unneccessary divs', making that menu a LIST like it's supposed to be, moving the logo up as a heading so the heading order makes sense, toss in a few empty span for glider-levin image replacement so you have ACTUAL text inside your heading and anchors, and of course turn the flow text into actual paragraphs.

    Moving on to the CSS first thing I'd do is put a reset in - that way no headaches over the different margins/padding applications between browsers.

    Let's see what else is akilter there... no fallback familiy when you declared tahoma, redeclaring it on the #text div makes the body declaration kind of pointless, and you don't declare line-height which is going to also make cross-browser a pain since it often seems that firefox pulls a random number out of a hat on that one.

    We can also combine down all your menu images to a single file, reduces bandwidth, makes the page load faster, and removes the 'delay' the first time you rollover the links... and if we declare the height and positioning of our outer container in em it will auto-enlarge so the text doesn't get cut off on large font/120dpi systems.

    Which all put together looks a little something like this:
    http://www.cutcodedown.com/for_others/martincheq/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/martincheq

    is unlocked so you can grab the gooey bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS if not for the single use of zoom to trip haslayout, tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.64 and 10 Beta, FF 2, 3 and 3.5, and the latest iterations of safari and chrome - both against normal fonts/96dpi and large fonts/120dpi.

    Hope this helps.
     
    deathshadow, Jul 3, 2009 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    But it's Aqua Bubble Teen Manga Force Minty-Fresh ass!
     
    Stomme poes, Jul 3, 2009 IP
  11. WebDizajnSajter

    WebDizajnSajter Peon

    Messages:
    31
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    DOCTYPE Transitional or Strict - means nothing to web designers, visitors, web browsers, search engines... But if you use transitional you can miss or omit something of less important, and can put wrong html tags inside other html tags and it’ll all be functioning properly. Otherwise you can first be familiar with, or with a thorough knowledge and good understanding of html and css, and after that begin with web designing sites. We all have too little time to waist. :)
     
    WebDizajnSajter, Jul 5, 2009 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    Absolutely false! Transitional does not mean it's OK to use invalid html or css and it would be absolutely stupid for any noob to attempt to learn how to create such pages that way.
     
    drhowarddrfine, Jul 5, 2009 IP
  13. WebDizajnSajter

    WebDizajnSajter Peon

    Messages:
    31
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    drhowarddrfine,

    XHTML 1.0 Transitional, allows the use of structural and semantic markup as well as presentational elements (such as font), which are deprecated in Strict. Do you satisfied with definition.

    I’ve got impression that you speak only on theoretical and philosophical basis, and not on practical basis, such as, how to solve specific problem. I have no intention to memorize definitions.

    Obviously you haven’t come across on problems and validating html markup is of top priority for you. That’s okay for you, I give you support and encouragement, learn by heart as many definitions as you can. :)
     
    WebDizajnSajter, Jul 5, 2009 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Christ, I sure wouldn't want YOU to write my pages. If you need to use a transitional doctype so you can use <font> and <center> tags, then that means you don't know how to write HTML. Tag Soup Is Not HTML.

    Oh this set of rules lets me rape babies and it's totally legal! I'm sorry, when did that make it right?

    If you don't know how to do something the right way, instead of the half-assed built-with-duct-tape way, then your job is to go learn how to do it right.

    Oh and please don't build any cardboard houses or cars for me either, your license saying the city is letting you build such crap doesn't mean any of us want to live in those houses or drive those cars.

    Mostly the attitude just offends me as a professional. Much like script kiddies piss off real programmers.

    Hmmm, that sounded pretty righteous and uppitty there, didn't it? Oh well, snapshot of a moment in time. I'm snarky sometimes.
     
    Stomme poes, Jul 8, 2009 IP
  15. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #15
    Just to ditto what Stomme Poes just said. I hadn't noticed the earlier post.
     
    drhowarddrfine, Jul 8, 2009 IP
  16. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    why the f are you people trying to get him to use archaic coding?
     
    JahRasta311, Jul 9, 2009 IP
  17. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Snarky? I think you were looking for stupid.

    The guy prefaced his dilemma with "I'm new to HTML/CSS".

    He's not hurting anyone/anything by experimenting.
     
    JahRasta311, Jul 9, 2009 IP
  18. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #18
    If you think I am trying to do that, I suggest you re-read the thread.
     
    drhowarddrfine, Jul 9, 2009 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    My comment was directed to a poster who was encouraging the OP to write complete garbage and use a doctype that would not alert this "new to HTML/CSS" to his errors (why would you encourage someone to learn bad habits?). Transitional doctypes let you get away with garbage code. You know, you can do this in programming languages too. Write a Perl script without strict or warnings. Get problems. Ask for help. Watch everyone jump on you and ask, "WHY didn't you use strict and warnings?? It would have caught these huge errors you have there! And now instead we're spending out time pointing them out to you because you didn't let the program do it for you!"

    Especially when you are new you should use a Strict doctype. Would you agree with a teacher in school showing people how to do math incorrectly and use a test scanner that allowed incorrect answers through, so that the kids feel as though they are learning math?? Of course not! But that is exactly what WebDizajnSajter is suggesting the OP do (I thought).

    The <font> tag is not experimenting (not that he's using it, he's got a strict doctype right now), it's just going backwards in progress. True, it's not going to kill thousands of people like arsenic in the water supply, but I mean, this is something we try to do the right way and show people the right direction and all that.

    Since you mistook where my comment was directed, I should make it clear: it was NOT directed to martincheq!
     
    Stomme poes, Jul 10, 2009 IP