The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> IExplorer Problem again.
Hefty
post Aug 19 2008, 05:45 PM
Post #1


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
I'm currently making a little school page. My page seems to work in FF but not IE. I'm going to give you the source, and a preview to help me fix this.
HTML
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="tabs" class="maintabs">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Process</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
<div id="search"><form><input type="text" name="searchbox" value="Site Search!"><input

type="submit" class="submit" value="S" name="searchsubmit"></form></div>
<div class="navborder"></div>
<div id="lgrg">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="leftbox">
<div class="headline1" align="center">[ News ]</div>
<div class="headline1bdr"></div>
This is a test.
</div>
<div id="rightbox">
<div class="headline2" align="center">[ Latest Creation ]</div>
<div class="headline2bdr"></div>
This is a test.
</div>
</div>

</body>
</html>

CSS
CODE
body {
background-image: url('img/bg1.gif');
}

#main {
width: 900px;
border: 4px solid #fff;
margin: auto;
height: 500px;
background-color: #dddacc;
}

.maintabs {
position: relative;
margin: 0px;
padding: 0px;
width: 892px;
}

.maintabs ul {
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 0px;
}

.maintabs li {
display: inline;
padding: 0px;
margin: 0px;
}

.maintabs a {
display: block;
float: left;
background: #ccc;
color: #000;
font-weight: bold;
padding: 5px 10px;
margin: 0 1px 0 0;
text-decoration: none;
}
.maintabs a:hover {
background-color: #000;
color: #FFF;
}

.navborder {height:.50em; background:#000; clear:left;}

#search {
float: right;
margin-top: 5px;
padding: 0;
clear: right;
}
#search input {
background: #dddacc;
border: 1px ridge #000;
color: #999;
}

#search .submit {
color: #000;
width: 20px;
}


#leftbox {
float: left;
width: 400px;
height: 300px;
margin: auto;
border: 1px solid #000;
margin-top: 32px;
margin-left: 10px;
background: #FFF;
}

#leftbox .headline1 {
font-size: 30px;
}

.headline1bdr {height:.10em; background:#000; clear:both;}

#rightbox {
float: right;
width: 400px;
height: 300px;
margin: auto;
border: 1px solid #000;
margin-top: 10px;
margin-right: 10px;
background: #FFF;
}

#rightbox .headline2 {
font-size: 30px;
}
.headline2bdr {height:.10em; background:#000; clear:both;}

#lgrg {
position: relative;
margin: 0;
padding: 0;
}

#lgrg ul {
list-type: none;
margin: 0;
padding: 0;
}

#lgrg li {
display: inline;
margin: 0;
padding: 0;
}

#lgrg a {
display: block;
float: right;
background: #ccc;
color: #000;
font-size: 12px;
padding: 1px 5px;
margin: 0 1px 0 0;
text-decoration: none;
}

#lgrg a:hover {
color: #FFF;
background-color: #000;
}



Preview: http://elitecs.info/Web%20Design/ (View this in FF and IE and look at the difference of the search box)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 19 2008, 06:18 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Remove the DIV around the form and move its id to to FORM (not related to problem, just a case of divitis). Then move the form inside #tabs. Remove the empty DIV used for a border (not related to problem, just neater).

Too be safe I'd also remove margin from FORM and margin + padding from UL and LI. You may want to use more specific selectors that I've don't here.



HTML
<div id="tabs" class="maintabs">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Process</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
<form id="search">
<input type="text" name="searchbox" value="Site Search!"><input type="submit" class="submit" value="S" name="searchsubmit">
</form>
</div>

<div id="lgrg">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>


Added CSS:
CODE

form    { margin: 0 }
ul,li   { margin: 0; padding: 0 }
#tabs   { border-bottom: .5em solid black }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hefty
post Aug 19 2008, 06:20 PM
Post #3


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
I'm going to fix it now, i'll get back to you after I have done so.


EDIT: Made no difference.

This post has been edited by Hefty: Aug 19 2008, 06:58 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
poojak
post Aug 19 2008, 11:14 PM
Post #4


Newbie
*

Group: Members
Posts: 15
Joined: 4-August 08
Member No.: 6,331
Hi,
I saw the problem and I think you need to add one more Div to wrape your maintabs class and search div.
It should be like:
<div id="top">
<div id="tabs" class="maintabs">
<ul>----</ul>
</div>
<div id="search">
<form>----</form>
</div>

</div>
Also defined appropriate height and width to top as well as maintabs clases/Ids because to fix this in IE you have to specify height and width.
Hope it helps.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Aug 19 2008, 11:15 PM
Post #5


Advanced Member
****

Group: Members
Posts: 107
Joined: 24-October 06
Member No.: 549
QUOTE(pandy @ Aug 20 2008, 03:18 AM) *

* * *
Added CSS:
CODE

form    { margin: 0 }
ul,li   { margin: 0; padding: 0 }
#tabs   { border-bottom: .5em solid black }


Sorry,
not { border-bottom: .5em solid black }
but {border-bottom: 0.5em solid black}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hefty
post Aug 19 2008, 11:16 PM
Post #6


Member
***

Group: Members
Posts: 48
Joined: 30-November 07
Member No.: 4,440
Dag, pandy is correct.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 20 2008, 04:21 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yes, you can leave out the 0 before a decimal point.
http://www.w3.org/TR/CSS2/syndata.html#q13
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Aug 21 2008, 01:19 AM
Post #8


Advanced Member
****

Group: Members
Posts: 107
Joined: 24-October 06
Member No.: 549
QUOTE(pandy @ Aug 21 2008, 01:21 AM) *

Yes, you can leave out the 0 before a decimal point.
http://www.w3.org/TR/CSS2/syndata.html#q13

Duno but few years ago I've changed all . to 0. because I readed somewhere (on w3c) about that... I'll try to find article. Also, 0. is more natural. Space inside brackets... it will work of course but why you should put space inside? Why not several instead of one?smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 21 2008, 01:51 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
What's natural is up to the indiviual. I don't think that omitting the zero is that uncommon in other computer languages. I know for sure you can do it in JS.
QUOTE

Space inside brackets... it will work of course but why you should put space inside? Why not several instead of one?smile.gif


Again, it's up to the individual. You can use as many spaces as you want. Why is this a problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 05:45 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC