/    Sign up×
Community /Pin to ProfileBookmark

position: relative; bottom: 70px; IE Misunderstandng?

Copy linkTweet thisAlerts:
Jul 01.2006

Hello, Name: Kyle
Uhm…

Im trying to get IE to show a menu, and a search box up at the top left of my page, I have the content in the closest table to the actual position, so Id use:

position: relative; bottom: 70px;

however, in Mozilla or anything like Mozilla, it does it just fine.. but in Internet Explore, I feel its doing the exact opposite? I htink its a matter of negating the 70px for it to show up right, but how can I make this work in both browsers?

Thanks
Kyle

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJul 01.2006 — Show the code.
Copy linkTweet thisAlerts:
@Kyleva2204authorJul 01.2006 — [code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> <META HTTP-EQUIV="Cache-Control" content="no-cache">
<META HTTP-EQUIV="Expires" content="0">
<META NAME="Author" content="Kyle Kirby">
<title>Commune : %_page_title</title>
<style type="text/css" media="screen"><!--
.main_table { border: solid 1px #0cc }
h2.title { color: #036; margin-left: 20px }
h4.title2 { color: #c00; margin-top: -12px; margin-left: 40px }
.links2 { position: relative; left: 60px ; top: -30px;}
.links2 a:link, .links2 a:visited, .links2 a:active { color: #036; font-size: 20px; font-family: Arial; text-decoration: none }
.links2 a:hover { color: #036; font-size: 20px; font-family: Arial; text-decoration: none; background-color: #fff }
.search {position: relative; bottom: 70px; left: 530px; width: 210px; height: 50px }
%_style
--></style>
</head>

<body bgcolor="#ffffff">
<table width="750" border="0" cellpadding="0" cellspacing="0" class="main_table" align="center">
<tr height="150">
<td width="750" height="150" background="pages/main/logo.jpg" valign="bottom">
<div class="search">
<form action="./?action=search" method="post">
<input type="search" name="query" placeholder="Persons Name" autosave="Commune Searches" results="5"><input type="submit" value="Search">
</form>
</div>
<div class="links2"><a href="./">lang(44)</a></div>
</td>
</tr>
<tr>
<td width="750">

<h2 class="title">%_page_title</h2>
<h4 class="title2">%_desc</h4>

%_html
</td>
</tr>
</table>
</body>

</html>[/code]
Copy linkTweet thisAlerts:
@KravvitzJul 01.2006 — First of all, you should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict.

[url=http://hsivonen.iki.fi/doctype/]Activating the Right Layout Mode Using the Doctype Declaration[/url]

[url=http://www.alistapart.com/articles/doctype/]Fix Your Site With the Right DOCTYPE![/url]

[url=http://www.juicystudio.com/choosing-doctype/]Choosing a DOCTYPE[/url]

[url=http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html]Use the Right Doctype[/url]

[url=http://www.webdevout.net/doctype_switching.php]Doctype switching[/url]

http://www.w3.org/QA/2002/04/Web-Quality

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Why are you using relative positioning anyway? I suggest you learn more about [url=http://www.dynamicsitesolutions.com/css/layout_techniques/]CSS Layout Techniques, especially floats.[/url]
Copy linkTweet thisAlerts:
@Kyleva2204authorJul 01.2006 — Saddly, IDK anything about doc types and im tired.. and Ill check into this further tomorrow, but I assume this is the DOC type you said to use?
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[/code]
? anywho, saddly IDK doctypes and what they are for, Yeah its a standerd to know prb, but yeah.. anyways thanks, ill chck it out later. ? I did tha doc type and it didnt work.

-- EDIT --

My bad man, yea it works. Thanks a lot ?
Copy linkTweet thisAlerts:
@KravvitzJul 01.2006 — You didn't answer my question. Perhaps you didn't notice the last line of the post above my signature?

Yes, that's the doctype I recommend.
Copy linkTweet thisAlerts:
@Kyleva2204authorJul 01.2006 — sorry, No i didnt read that part. I have links inside a table, thats centered on the page, but I want the links to go further up on the page while still being inside the table, If its absolute positioning it wont be right for everyone because the table is center, and it varies depending upon the persons resize. ? Got another solution? Im always willing to learn.
Copy linkTweet thisAlerts:
@KravvitzJul 01.2006 — Any CSS layout technique will cause problems at some point if you don't have a good understanding of it. You should read the [url=http://www.dynamicsitesolutions.com/css/layout_techniques/]articles on CSS layout techniques[/url] that are linked to in the page I linked to previously and read at least the first article listed in each of these two groups.

[b]Tablefree layouts:[/b]

[url=http://www.hotdesign.com/seybold/index.html]Why tables for layout is stupid: problems defined, solutions offered[/url]

[url=http://davespicks.com/essays/notables.html]Why avoiding tables (for layout) is important[/url]

[url=http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml]Ten ways to speed up the download time of your web pages[/url]

[url=http://www.workingwith.me.uk/tablefree/why/]Why go table free?[/url]

[url=http://www.dorward.me.uk/www/nested/]Nested Tables: About the (ab)use of tables as layout tools in webpages.[/url]

[url=http://www.sitepoint.com/article/tables-vs-css/]Tables Vs. CSS - A Fight to the Death[/url]

[url=http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html]Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS[/url]

[url=http://www.westciv.com/style_master/house/good_oil/dead_layout/]The layout is dead, long live the layout[/url]

[url=http://evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/]Tables or CSS: Choosing a layout[/url]

[url=http://forums.devshed.com/css-help-116/what-are-tables-really-for-335225.html]What are tables really for?[/url]

[b]Semantics:[/b]

[url=http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html]Semantic code: What? Why? How?[/url]

[url=http://www.maxdesign.com.au/presentation/sit2003/05.htm]Semantic code[/url]

[url=http://www.webaim.org/techniques/structure/]Creating Semantic Structure[/url]

[url=http://www.brainstormsandraves.com/articles/semantics/structure/]Semantics, HTML, XHTML, and Structure[/url]

[url=http://www.kottke.org/03/08/standards-semantically-correct]Standards don't necessarily have anything to do with being semantically correct[/url]

[url=http://www.andybudd.com/archives/2004/05/semantic_coding/]Semantic Coding[/url]
Copy linkTweet thisAlerts:
@Kyleva2204authorJul 02.2006 — Thanks man! Will do ?
Copy linkTweet thisAlerts:
@toicontienJul 03.2006 — Actually, you can use absolute positioning so it's "relative" to it's containing block in code. Read the "Quick Positioning Explanation" thread I link to in my signature. It gives a good basis for how positioning works.
×

Success!

Help @Kyleva2204 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...