ie 7 css space problem

Discussion in 'CSS' started by OPETH, Nov 25, 2008.

0
  1. #1
    OPETH, Nov 25, 2008 IP
  2. i.run.shit

    i.run.shit Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am running Firefox 3 and IE 8 and I don't see the issue. I took the liberty at looking through your CSS and I don't see what the problem would be. Try using http://browsershots.org and see which browsers you have this issue in. Once you've found out which browsers, Google the issue, try to find a solution. :) It's hard to help when I can't find the problem.

    P.S.: Your coding is a bit of a mess though.
     
    i.run.shit, Nov 26, 2008 IP
  3. greenbaret

    greenbaret Peon

    Messages:
    24
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    May be you can add

    font-size:0
    at top row
     
    greenbaret, Nov 26, 2008 IP
  4. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    There's lotsa errors but start by fixing

    <script language="JavaScript" type="text/javascript" src="htmlturk.js">
    </script

    <meta name="Author" content="Serkan CEYLAN">

    </script> isn't closed?

    <div style="width:800px;height:28px; background-color:#a3c856;border-bottom:2px solid" >

    no ending ";" ?

    etc...

    after having it properly coded then you can check on actual browser bugs.

    Also using inline styles isn't really the way to go on a site with that theme...
     
    007c, Nov 29, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    First off, fix your markup. Proper indenting would probably help point out the 25 validation errors, though many of those are in fact just attributes that don't match your doctype. (like the long defunct language attribute)

    Moving ALL of your presentation out of the markup would likely be of great help too - if you are still using the 'align' attrbute you have already screwed up.

    Also, have you seen how bad Safari, Chrome and Opera are mangling it?

    I would start by stripping the markup down to the bare essentials:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html	lang="en"><head>

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

<link rel="stylesheet" type="text/css" href="htturk.css">
<link rel="shortcut icon" href="favicon.ico">


<title>
	HTMLTURK
</title>

</head><body>

<div id="container">

	<form	name="ara" id="ara" method="POST"	action="index.php?page=1">
 		<div>
			<input
				type="text"
				name="kelime"
				id="kelime"
			/>
			<input
				value="Sitede Ara"
				type="submit"
				class="aramabutonu"
			/>
		</div>
	</form>
	
	<h1>
		<b>HTMLTURK</b>.COM
		<span></span>
	</h1>


	<ul id="mainMenu">
		<li><a href="index.php" accessKey="a">Ana Sayfa</a></li>
		<li><a href="index.php?page=9" accessKey="b">Iletisim</a></li>
		<li><a href="index.php?page=6">Ziyaretçi Defteri</a></li>
		<li><a href="index.php?page=5">HTML Testi</a></li>
	</ul>
	
	<div id="content">
		<h2>
			Sagdaki ders menülerine tiklayarak derslere ulasabilirsiniz.
		</h2>
		Page Content Here
	<!-- #content --></div>

	<div id="sideBar">
		<h2>DERSLER</h2>
		<ul>
			<li><a href='index.php?page=2&id=1'>Html'nin Tarihi</a></li>
			<li><a href='index.php?page=2&id=2'>Html'e Giris</a></li>
			<li><a href='index.php?page=2&id=3'>Metin Formatlari</a></li>
			<li><a href='index.php?page=2&id=4'>Paragraf Tagi</a></li>
			<li><a href='index.php?page=2&id=5'>Heading Tagi </a></li>
			<li><a href='index.php?page=2&id=6'>Horizantal Tagi</a></li>
			<li><a href='index.php?page=2&id=7'>Html Link</a></li>
			<li><a href='index.php?page=2&id=8'>Body Tagi </a></li>
			<li><a href='index.php?page=2&id=9'>Html Karakter Seti </a></li>
			<li><a href='index.php?page=2&id=10'>Doctype Tagi</a></li>
			<li><a href='index.php?page=2&id=11'>Meta Taglari</a></li>
		</ul>
		<div class="sayacno">
			<h2>Toplam Ziyaretçi Sayisi</h2>
			919
		</div>
	<!-- #sideBar --></div>
<!-- #container -->
	
<div id="footer">

	<div class="year">
		:::2008:::
	</div>
	
	<div class="text">
		:::Design by Serkan CEYLAN:::
	</div>
	
<!-- #footer --></div>

</body></html>
    Code (markup):
    Everything else you are doing could easily be done in the CSS.

    Oh, and you do know that 800px is not 800px friendly, right? You need to subtract at least 32px to make room for the toolbar - NOT that I would fix the width of this layout given it's simplicity.
     
    deathshadow, Nov 29, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Hmm, that HTML wasn't quite right - my bad for posting before I'm fully awake.

    I did a quick rewrite template to show what I mean by getting your presentation out of your markup and tossing out the useless attributes. Pretty much I slapped your layout into one of my semi-fluid width 100% min-height baselines.

    http://www.cutcodedown.com/for_others/Opeth/template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/Opeth

    is unlocked so you can easily grab the code. You'll want the images as I re-optimized and recombined down many of them, and created a couple new ones like the fauxColumn image.

    Valid HTML 4.01, would be valid CSS if not for the IE workarounds for min-width and max-width. Tested working in IE 6 & 7, Opera 9.27 and 9.5, FF 2.0.13 and FF 3.0.4, Safari 3 and Chrome. Has some minor layout issues in IE 5.5 that could probably be fixed, but I didn't feel like spending the time.
     
    deathshadow, Nov 29, 2008 IP