5 Replies - 3335 Views - Last Post: 07 November 2011 - 05:09 PM

#1 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 18-June 11

Outline border moves far to left when position elements

Posted 02 November 2011 - 04:58 PM

Hello, I'm trying to make a alphabetical directory where you click on a link and it transports you to that certain alphabet list(I hope you can see the image). Anyways, whenever I position the second half of the list(m-z) to the right side, the outline is pushed all the way to the right. I don't know why this is so because the border still stays in place when I position the lists

this is the html
http://blackyurizan....om/An_Full.html



On lines 22-23 are the classes that I used to position the lists to the right or the left. On lines 65-277 are the alphabet lists and on lines 8-11 is basically the palette they're put on. Now is there anything I can do to the outline or do I have to delete it because it always do that when I position something inside of it?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> 
<html>
<head>
<title > Anime Reviews </title>
<style type="text/css">
p{color:white; font-family:verdana;}
.palette{background-color:rgb(1,23,60);  border-style:groove; border-width:10px; border-color:rgb(36,146,255); 
outline-style:inset; outline-width:10px; outline-color:rgb(50,70,255); 
 position:relative; top:100px; left:170px; margin-right:200px;
}
.menu{  list-style-type:none;
position:fixed; top:330px; border-width:2px; left:-20px;
}
a.link{ display:block;text-decoration:none; color:white;    background-color:rgb(1,23,60); font-size:20px; 
 font-family:verdana; margin-bottom:10px;  border:solid rgb(36,146,255) }
a:visited.link{ background-color:black;}
 a:hover.link{background-color:rgb(36,146,255); color:white; }

 ul{color:white; font-variant:small-caps; list-style-type:none;}
 div.list li{display:inline;}
 div.list a{color:white;}
 ul.right li{position:relative; left: 380px; }
ul.left li{ position:relative; left: 700px; bottom: 510px;  }

</style>
</head>
<body style="background-color:rgb(0,18,49);">

<div style="text-align:center; font-size:3em; font-family:verdana;">
<h1 style="color:white;">Full Reviews </h1>
</div>

<div class="palette">

<div class="list" style="text-align:center;">
<ul>
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d"d</a></li>
<li><a>e</a></li>
<li><a>f</a></li>
<li><a>g</a></li>
<li><a>h</a></li>
<li><a>k</a></li>
<li><a>l</a></li>
<li><a>m</a></li>
<li><a>n</a></li>
<li><a>o</a></li>
<li><a>p</a></li>
<li><a>q</a></li>
<li><a>r</a></li>
<li><a>s</a></li>
<li><a>t</a></li>
<li><a>u</a></li>
<li><a>v</a></li>
<li><a>w</a></li>
<li><a>x</a></li>
<li><a>y</a></li>
<li><a>z</a></li>
</ul>
</div>

<ul class = "right">
<li><a name="a">A</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="right">
<li><a name="b">b</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


<ul class="right">
<li><a name="c">c</a></li>
<li>chobits</li>
<li> claymore</li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="right">
<li><a name="d">d</a></li>
<li>dragonball</li>
<li>dragonballz</li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="right">
<li><a name="d">e</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="right">
<li><a name="d">f</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="right">
<li><a name="d">g</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="right">
<li><a name="d">h</a></li>
<li>highschool rumble</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ul class="right">
<li><a name="d">i</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ul class="right">
<li><a name="d">j</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ul class="right">
<li><a name="d">k</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ul class="right">
<li><a name="d">l</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="left">
<li><a name="d">m</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="left">
<li><a name="d">n</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="left">
<li><a name="d">o</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">p</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">q</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">r</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">s</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">t</a></li>
<li>The Sacred Blacksmith</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">u</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">v</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">w</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">x</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">y</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left">
<li><a name="d">z</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>



</div>





<ol    class="menu" >
<li><a class="link"  href="Anime Reviews.html"> Home</a></li>
<li><a class="link"  href="An_Full.html"> Full Review</a></li>
<li><a class="link"  href="www.google.com"> First Impression</a></li>
<li><a class="link" href="www.google.com"> Movies</a></li>
</ol>


</body>
</html>


Attached File(s)


This post has been edited by black_yurizan: 02 November 2011 - 06:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Outline border moves far to left when position elements

#2 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Outline border moves far to left when position elements

Posted 02 November 2011 - 07:10 PM

What do you mean the outline goes all the way to the right?
Was This Post Helpful? 0
  • +
  • -

#3 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 18-June 11

Re: Outline border moves far to left when position elements

Posted 03 November 2011 - 04:15 AM

I've created an inset outline border as a palette to put the Alphabet directories in. Whenever I position the alphabet lists(m-z) to the right, the inset outline border is being pushed to the right. So much so that there is a huge gap between the border and the outline border. look into the html link and you'll see what I'm talking about
Was This Post Helpful? 0
  • +
  • -

#4 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Outline border moves far to left when position elements

Posted 03 November 2011 - 05:43 PM

Oh, it's that line that dark blue line that goes beyond the borders? Chrome works fine, just tried it in Firefox. Seems to be that the solution is simple, on the css element where you have the outline, put in:
overflow: hidden;

Hope it works. ^^
Was This Post Helpful? 1
  • +
  • -

#5 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 18-June 11

Re: Outline border moves far to left when position elements

Posted 04 November 2011 - 02:44 PM

Wow, thanks your the man! But I got to ask you or somebody who knows about this, why did the document get overflowed just because I positioned the lists to the opposite side?
Was This Post Helpful? 0
  • +
  • -

#6 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: Outline border moves far to left when position elements

Posted 07 November 2011 - 05:09 PM

Here's the link to the article I read about this:
http://snook.ca/arch...trimming_long_o
Seems to be a bug regarding text-indent and image replacement. ^^
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1