View Full Version : Inserting an anchor link breaks my page?!

04-29-2010, 12:46 PM
Please help?!

I have styled my page an all looks and works great although when I put an anchor link in the page it breaks my styling and pushes the page down slightly?!

I have attached a class to the link anchor name:
.none { margin:0px; padding:0px; }

that didn't work?!

04-29-2010, 01:16 PM
OK. And we are supposed to guess how your page looks or what? :confused:

04-29-2010, 01:35 PM

04-29-2010, 02:29 PM
Without looking at your source code it is going to be very difficult to provide you with any advice.

Is the page in question accessible on the Web?

If not can you attach the page and supporting files, or include them in [ code] [ /code] sections?

04-29-2010, 02:33 PM

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Welsome to RE Car Rental, Bahamas</title>
<meta name="description" content="xxx" />
<meta name="keywords" content="xxx" />
<meta name="Content-Language" content="en-gb" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta name="revisit-after" content="2 days" />
<meta name="copyright" content="xxx" />
<meta name="author" content="www.warrencreative.com" />
<meta name="distribution" content="Global" />
<meta name="resource-type" content="document" />
<link rel="stylesheet" type="text/css" href="css/reset-style.css" />
<link rel="stylesheet" type="text/css" href="css/sitestyle.css" />
<div id="doc">
<div id="hd">
<div class="top">&nbsp;</div>
<div class="banner">
<h1>RE Car Rental Nassau, Bahamas</h1>
<span>Email: <a href="info@recarrental.com" title="info@recarrental.com">info@recarrental.com</a></span>
<b>Tel: (242) 361 6284</b>
<ul id="nav">
<li class="home menuselected"><a href="#">Home</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="interest"><a href="#">Places of Interest</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<div class="shadow">&nbsp;</div>
<div id="bd">
<div class="yui-g">
<div id="leftcolumn" class="yui-u first">
<div class="picture">
<div id="image1">
<img src="images/car1.jpg" border="0" alt="one" />
<div id="image2" style="display:none">
<img src="images/car2.jpg" border="0" alt="two" />
<span><a href="#reserve" title="reserve your vehicle today"><img src="images/ReserveButton.png" alt="reserve your vehicle today" /></a></span>
<h2>Welcome to RE Car Rental</h2>
<p>When you need to rent a car, truck, forklift or van, try R & E Car Rental in Bahamas Nassau, for
the best vehicles at the most competitive prices. Based in Nassau Bahamas our location is central
to everything, we also offer pick up and delivery service.<a id="two" href="#" onclick="changeIt('image2');">R & E Car Rental</a> has over 6 years of
satisfied customers in the Bahamas, we are the best choice compared to the high prices of the
larger car rental agencies. <a id="one" href="#" onclick="changeIt('image1');">Check us out</a> for great rates with low deposit fee and superior service!</p>
<div class="yui-u" id="rightcol">
<img src="images/car-search.jpg" alt="" />
<div class="line">&nbsp;</div>
<div class="yui-g">
<div id="leftcolumn2" class="yui-u first">
<img src="images/reserve-your-vehicle.jpg" alt="reserve your vehicle" />
<a name="reserve" class="none"></a>
<div class="shortline">&nbsp;</div>
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="images/smallcar1.jpg" alt="An image that says Install X A M P P for wordpress." width="260" height="145" /></a>
<h2>4x4 from $50 per day</h2>
<div class="slide">
<a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="images/smallcar2.jpg" width="260" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>
<h2>4x4 from $50 per day</h2>
<div class="slide">
<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/smallcar3.jpg" width="260" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>
<h2>4x4 from $50 per day</h2>
<div class="yui-u" id="rightcol2">
<a href="#" class="online" title="chatroom">
<br />
Live Chat<br />
We are ready to help<br />
you at every step
<img src="images/shortshadow2.jpg" alt="shadow" />
<h2>The Right Vehicle For You</h2>
<p>R & E Car Rental stock everything from economy cars to full size luxury sedans
with climate control to soothe customers from the warm temperature in the
Bahamas. We also provide rental on Pick-Up trucks, Box Trucks, Mini-Vans,
Cargo Vans, 15-passenger vans, SUV's, Station Wagons, they are all available.</p>
<div id="ft">
<img src="images/bottom.jpg" alt="bottom" />
<div class="right"><a href="#" title="Terms &amp; Conditions">Terms &amp; Conditions</a></div>


/** Main **/
html{ background-image:url(../images/bg.jpg); background-repeat:repeat-x; background-attachment:fixed; background-color:#cceffb}
p{ padding: 8px 0px; font-size:14px;}
body{ font-size: 12px; color: #333333; line-height:17px;}
a{ text-decoration: none; color: #333333;}
a:hover { color: #00aded; text-decoration: none;}
h1{ background-image:url(../images/Logo.png); background-repeat:no-repeat; font-size:22px; height:60px; left:6px; overflow:hidden; position:absolute; text-indent:-350px; top:10px; width:532px;}
.content { position:absolute; top:32px; }
a.on { color: #58929D; }
h2.on { color: #58929D; }
.selected { color:#00aded; }
.menuselected { font-weight:bold; }
.imgleft { float:left; padding:0 20px 20px 0; }
.biginfo { font-size:14px; font-weight:bold; margin:10px 0px 20px 0px;}
.biginfo a{ color:#00aded;}

/** End Main **/

/** Structure **/
#doc{ font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif; width:980px; color: #484747; margin-top:30px; position:relative; clear:both; overflow:hidden; background-color:#fff; }
#hd{ background-image:url(../images/mid.jpg); background-repeat:repeat-y; height:204px; position: relative; font-size:14px; }
#hd .top{ background-image:url(../images/top.jpg); height:29px;}
#hd .banner{ background-image:url(../images/BannerImage.jpg); width:915px; height:134px; position:absolute; top:26px; left:33px; }
#hd .banner span{ position:absolute; left:17px; top:75px; color:#ffffff; font-weight:bold;}
#hd .banner b{ position:absolute; left:224px; top:75px; color:#ffffff; }
#hd .banner a{ color:#ffffff; }
#hd .banner a:hover{ font-weight:bold; }
#hd .shadow{ background-image:url(../images/shadow.jpg); width:915px; height:11px; position:absolute; top:190px; left:33px;}
#bd{ background-image:url(../images/mid.jpg); background-repeat:repeat-y; clear:both; }
#bd .line{ border-bottom:1px solid #adaeb0; margin:0px 32px 0px 33px; height:8px; }
.yui-g{ padding:0 32px 0 33px; overflow: hidden; }
#leftcolumn2.none { margin:0px; padding:0px; overflow:hidden; text-indent:-200px;}
/** Structure **/

/** Nav **/
#nav{ background-image:url(../images/nav.png); height:30px; width:915px; position:absolute; top:160px; left:33px; display:block; margin-bottom:4px; background-color:#19b5ee; font-size:14px; }
#nav li{ display:inline-block; margin:6px 10px; width:114px; vertical-align:top; text-align:center; }
#nav a { color:#ffffff; }
#nav a:hover { font-weight:bold; }
/** End Nav **/

/** main column **/
#maincolumn{ padding:10px; width:720px; display:block; position:relative; }
#maincolumn h2{ font-size:17px; font-weight:bold;}
#maincolumn h3{ font-size:15px; font-weight:bold;}
#maincolumn p { padding-bottom:15px; }
/** main column **/

/** Left column **/
#leftcolumn{ width:536px; display:block; position:relative; }
#leftcolumn h2{ font-size:17px; font-weight:bold; margin:10px 0;}
#leftcolumn h3{ font-size:13px; font-weight:bold; }
#leftcolumn p{ font-size:12px;}
#leftcolumn .picture{ height:269px; }
#leftcolumn .picture span{ position:absolute; top:212px; right:8px; }
#leftcolumn .picture b{ position:absolute; top:249px; right:0px; background-image:url(../images/shortshadow.jpg); width:536px; height:17px; display:block; }
#leftcolumn li { width:121px; display:inline-block; margin-right:10px; margin-bottom:20px; }
#leftcolumn li a { font-size:11px; color:#00aded;}
#leftcolumn li a:hover{ font-weight:bold; }
#leftcolumn .contact { color:#00aded!important; }
#leftcolumn a:hover{ font-weight:bold; }
/** End Left column **/

/** Right column **/
#rightcol {width:356px; position:relative; display:block; padding-left:15px;}
#rightcol .right {float:right; }
#rightcol .left { position:absolute;left:0px; bottom:0px; }
/** END Right column **/

/** Left column2 **/
#leftcolumn2{ margin-top:15px; margin-bottom:15px; width:446px; }
#leftcolumn2 h2{ font-size:16px; padding-bottom:10px; font-weight:bold;}
#leftcolumn2 h3{ font-size:14px; padding-bottom:5px; font-weight:bold; }
#leftcolumn2 p{ font-size:14px; line-height:20px; padding-bottom:20px;}
#leftcolumn2 .shortline { border-top:1px solid #adaeb0; margin-top:15px; }

/** End Left column **/

/** Right column2 **/
#rightcol2 {margin-top:15px; margin-bottom:15px; width:439px; padding-left:22px; position:relative; display:block; }
#rightcol2 h2{ font-size:17px; margin:10px 0px; font-weight:bold; }
#rightcol2 p{ font-size:12px; }
#rightcol2 .online {background-image:url(../images/online.jpg); width:439px; height:194px; display:block; text-indent:-200px; overflow:hidden; position:relative; }
#rightcol2 .offline {background-image:url(../images/offine.jpg); width:439px; height:194px; display:block; text-indent:-200px; overflow:hidden; position:relative; }
#rightcol2 span { position:absolute; top:0px; left:20px; color:#da863d; font-weight:bold; font-size:16px; }
/** END Right column **/

/** Footer **/
#ft{ width:980px; height:70px; margin:0 auto; position: relative; clear:both; font-size:11px;}
#ft .right{ float:right; padding:0px 20px; }
#ft li{ float:left; padding:0px 12px; font-size:11px; }
#ft ul { padding:20px; }
#ft .termsselected { color:#00aded!important; font-weight:bold!important; }
/** End Footer **/

#slideshow {
margin:0 auto;
#slideshow #slidesContainer {
margin:0 auto;
overflow:auto; /* allow scrollbar */
#slideshow #slidesContainer .slide {
margin:0 auto;
width:240px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
#slideshow #slidesContainer .slide h2{

* Slideshow controls style rules.
.control {
cursor: pointer;
#leftControl {
background:transparent url(../images/control_left.jpg) no-repeat 0 0;
#rightControl {
background:transparent url(../images/control_right.jpg) no-repeat 0 0;

04-29-2010, 03:26 PM
That is a good start, but unfortunately it is not enough.

To see why, in a new directory place your code in test.html and your CSS in css/sitestyle.css
Then look at test.html in a browser.

It looks nothing like your illustration.

We are missing at least css/reset-style.css and the images probably make a difference too.

04-29-2010, 03:43 PM
reset.css (is YAHOO UI - I never change this)

Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
version: 2.6.0
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset ,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-g2 .yui-u .yui-g{width:100%;}{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;} .yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

04-30-2010, 09:01 AM
Can anyone help me on this?
Can't i just hide the <a name="anchor"> using a style?

04-30-2010, 12:26 PM
Ah, the penny dropped.

I think you are using <a name=""> to create a named anchor so you can link to that part of your page.

If that is the case why not just put an id on a suitable near by tag instead.

So instead of:

<a name="reserve" class="none"></a>
<div class="shortline">&nbsp;</div>

You could use:

<div id="reserve" class="shortline">&nbsp;</div>

04-30-2010, 03:26 PM
I have tried this and my page now looks like this:


05-01-2010, 10:40 AM
Unfortunately posting an image only shows that you have a problem. It does not allow anyone to suggest a solution that is anything other than guess work.

Can you put your page on a publicly accessible website somewhere and let us know where it is so we can take a look?


05-02-2010, 07:02 AM
All that I can do now is open that image in photoshop or something like and then make some touches :p.

05-02-2010, 10:44 AM
you probably have something like "display: block;" in there somewhere (creates a line break). I use that. I have not one single "<br />" on my entire site.

Post your url so we can look at it, if it's online.

05-02-2010, 10:46 AM
You could also specifically address that one link with style="display: inline;" inside the tag.

05-04-2010, 09:27 AM

05-04-2010, 05:30 PM
can anyone please help me here>?

05-05-2010, 08:33 AM
I don't see any such gap in my FF3.6

05-05-2010, 09:48 AM
This is now resolved!