Jump to content

[SOLVED] Why is there a extra left border in opera and bottem border in IE?


cs.punk

Recommended Posts

This is doing my head in... In firefox it looks perfect though...

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Lists</title>
<link href="/files/css.css" rel="stylesheet" type="text/css" />
</head>

<body id="about">

<div class='head'>
<img align="left" src="images/logo.jpg" width="300" height="100" />
<img src="images/logobar.jpg" width="724" height="100" />
</div>

<ul id="list-menu">
<li id="menu-home"><a class='nav' href="#">Home</a></li>
<li id="menu-about"><a class='nav' href="#">About</a></li>
<li id="menu-archive"><a class='nav' href="#">Archive</a></li>
<li id="menu-lab"><a class='nav' href="#">Lab</a></li>
<li id="menu-reviews"><a class='nav' href="#">Reviews</a></li>
<li id="menu-contact"><a class='nav' href="#">Contact</a></li>
</ul>

<div class='main_content'>

<p>BLAHAHAHAHA BLAH BHA BHA AHB AH BNBLHA BLAH</p>
</div>

</body>
</html>

 

/* Body */
body
{margin: 0;
   background-color: #ADD1DC;
}

/* Text/Font Styles */

.top_heading
{font-family: Verdana;
    font-size: 26px;
color: #333333;
}

/* a hrefs/links */

a.nav
{font-family: Verdana;
   font-weight: bold;
}

/* Divs */

div.head
{border: solid;
   border-width: 1px;
   border-left-width: 0px;
   border-right: 0px;
   border-top-width: 0px;
   border-color: #0066FF;
   background-color: #0099FF;
   height: 100px;
}

div.main_content
{padding: 10px;
}

 

Anyone know whats going on?

 

Attached is a screenshot..

 

[attachment deleted by admin]

Link to comment
Share on other sites

Where exactly is the extra border? In your image? the menu?

 

If in the image, try adding a border=0 to the image.

<img src="image.jpg" border="0" width="" height="" />

 

If it's the CSS style, try compacting what you have:

div.head
{border-bottom: 1px solid #0066FF;
   background-color: #0099FF;
   height: 100px;
}

Link to comment
Share on other sites

I summed it down even futher to the most simplist thing... Yet stilll...  :wtf: :wtf: :wtf:

 

<html>

<head>
<title>CSS Lists</title>
<link href="/files/css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class='head'>
<img src="images/logo.jpg" align='left' border="0"/>
<img src="images/logobar.jpg" width="724" height="100" border="0" />
</div>

</body>
</html>

 

body
{margin: 0px;
}


div.head
{border: solid;
   border-width: 1px;
   border-left-width: 0px;
   border-right: 0px;
   border-top-width: 0px;
   border-color: #0066FF;
   height: 100px;
}

 

Attached is a screenshot..

 

 

[attachment deleted by admin]

Link to comment
Share on other sites

CSS and auto margins.

 

With CSS do you mean:

 

/* CSS */

.c-align
{align: center;
}

/* index.html */

<img class='c-align' sr='image.jpeg' /> 

 

?

 

Also btw I found a solution...

 

There must not be any spaces inbetween your <img/> tags...

 

[b]Good[/b]
<img/><img/>

[b]Bad (spaces will appear in between)[/b]
<img/> <img/>
<img/>

 

Grrr, this has haunted me before too....  ::)

Link to comment
Share on other sites

  • 3 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.