Member Avatar for Awah Mohamed

hey people
i am building a website that has a leftbar which has some links.
i added the code and the div of the leftbar and everything was very fine until i tried to lunch the site on firefox and safari.
in opera and IE it is fine but in firefox and safari the links apear like this:

ProfilePhotos
Blog!Friends
GroupsPages
Events

while it is supposed to be like this:

Profile

Photos
Blog!
Friends
Groups
Pages
Events

the code is this:

<a href="profile.php?uid=<?php echo $id; ?>" title="Go to your profile" id="list">Profile</a><BR><BR>
<a href="photos.php?uid=<?php echo $id; ?>" title="Go to your photos" id="list">Photos</a><BR>
<a href="blog.php?uid=<?php echo $id; ?>" title="Go to your Blog!" id="list">Blog!</a><BR>
<a href="friends.php?uid=<?php echo $id; ?>" title="Your Friends" id="list">Friends</a><BR>
<a href="groups.php?uid=<?php echo $id; ?>" title="See your Groups" id="list">Groups</a><BR>
<a href="pages.php?uid=<?php echo $id; ?>" title="See Your Pages" id="list">Pages</a><BR>
<a href="events.php?uid=<?php echo $id; ?>" title="Your Events" id="list">Events</a><BR />

and it is located in a divs with the id left and lft_bar

the css is:

#left_bar {
background-color:#333333;
color:#FFFFFF;
font-size:18px;
float:left;
width:24%;
height:auto;
}

please tell me what shall i do to solve this.
any help will be greatly appreciated!

  • 3 Contributors
  • 3 Replies
  • 105 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by ko ko
floatingDivs commented: Don't be a jackass, "prince" -1

Dani AI

Generated

The symptom — link labels running together in Firefox/Safari while IE/Opera look fine — usually comes down to markup validity or a CSS/layout rule that different engines handle differently. correctly hinted at float quirks and 's advice to use semantic navigation is the right direction. A short checklist and a small, safe fix follow.

  • Confirm the browser actually sees the expected HTML (use the browser inspector to view the live DOM and the computed styles).
  • Run the page through the W3C Markup Validation Service to catch unclosed tags, duplicate attributes, or other structural errors.
  • Ensure the document has a standards DOCTYPE; missing or wrong DOCTYPE can trigger quirks mode and produce inconsistent layout across browsers (see MDN on the DOCTYPE concept).
  • Avoid repeating the same id on multiple elements (the id attribute must be unique — see MDN on id). Repeated ids can cause selector or scripting surprises.

A practical, low-risk fix is to treat the nav items as block-level links (or as list items, per ). Making the anchors behave as blocks removes inline whitespace/flow differences between engines and normalizes line breaks. Also search the stylesheet for properties like white-space: nowrap or unexpected floats applied to the anchors or their parent; those rules commonly cause the exact symptom seen here (see MDN on the display property for details).

If the problem persists after these steps, a minimal, validated example (single HTML file with the nav only) will isolate whether the issue is markup, CSS, or a browser quirk.

Recommended Answers

All 3 Replies

Member Avatar for Awah Mohamed

awsome!!
so you all dont know the answer??
what kind of web developers are you???
COOLLLLL

commented: They are probably the kind that won't suffer petulant fools. -3
Member Avatar for floatingDivs

the prince Awah,

You clearly do not seem to understand that we don't wait for you to beckon us for help. I'm sorry you feel as though the world (specifically Daniweb) owes you this huge favor of doing the work for you, but I doubt anyone with any self-respect will help you after you managed to insult the entire board.

Secondly, in response to your question about what kind of web developers we are, I think it's fair to say we're far superior to you. The fact that YOU came to US for help should tell you this much, genius.

Lastly, I think the problem is fairly obvious, but I'm not going to give you an easy answer.

Instead, you can read this article and figure out the solution on your own, kiddo.

http://css-tricks.com/all-about-floats/

Edited by floatingDivs because: n/a
Member Avatar for ko ko

<a href="profile.php?uid=<?php echo $id; ?>" title="Go to your profile" id="list">Profile</a><BR><BR>
<a href="photos.php?uid=<?php echo $id; ?>" title="Go to your photos" id="list">Photos</a><BR>
<a href="blog.php?uid=<?php echo $id; ?>" title="Go to your Blog!" id="list">Blog!</a><BR>
<a href="friends.php?uid=<?php echo $id; ?>" title="Your Friends" id="list">Friends</a><BR>
<a href="groups.php?uid=<?php echo $id; ?>" title="See your Groups" id="list">Groups</a><BR>
<a href="pages.php?uid=<?php echo $id; ?>" title="See Your Pages" id="list">Pages</a><BR>
<a href="events.php?uid=<?php echo $id; ?>" title="Your Events" id="list">Events</a><BR />

Try with below. This is proper format for the navigation.

<ul id="left_navigation">
	<li><a href="profile.php?uid=<?php echo $id; ?>" title="Go to your profile" id="list">Profile</a><BR><BR>/li>
	<li><a href="photos.php?uid=<?php echo $id; ?>" title="Go to your photos" id="list">Photos</a></li>
	<li><a href="blog.php?uid=<?php echo $id; ?>" title="Go to your Blog!" id="list">Blog!</a></li>
	<li><a href="friends.php?uid=<?php echo $id; ?>" title="Your Friends" id="list">Friends</a></li>
	<li><a href="groups.php?uid=<?php echo $id; ?>" title="See your Groups" id="list">Groups</a></li>
	<li><a href="pages.php?uid=<?php echo $id; ?>" title="See Your Pages" id="list">Pages</a></li>
	<li><a href="events.php?uid=<?php echo $id; ?>" title="Your Events" id="list">Events</a></li>
</ul>

Add CSS to the navigation.

ul#left_navigation {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#left_navigation li {
	display: block;
	line-height: 1.5em;
	list-style: none;
}

Hope this help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.