473,466 Members | 1,530 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

CSS buttons: causes shifting text

BB
Thanks for the reply, previously, to my query.

An issue has been raised, the code below is used for css buttons and is
contained in an external .css file: plang.css
This html is a left-side navbar kinda thingie. When the mouse floats over
the defined area the text changes to bold and another color, while the
background is also changed to another color. The button text is followed by
a line seperator (navline.gif).

The concern: moving the mouse from top to bottom over the 'buttons' is
shifting all of the .gif file,s and text that fall below the highlighted
button.
It appears as a ripple flowing downward. This has been rated as "not good"
:( Does this have a css solution? Or must I find a different method?
--------------------o h, t h a n k s!!---------------
A {text-decoration: none;}
A:link{color:#ff9966;}
A:visited{color:#ff9966;}
A:active{color:#ff9966;}
A:hover {font-weight: bold; color: yellow; background-color: navy;}

-------- below is the sample html using the styles------- sorry about the
caps....

<HTML>
<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html">
<TITLE>Peter Lang Showroom</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="plang.css">
</HEAD>
<BODY>
<DIV ALIGN="left"> <A HREF="index.html">Home</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>
<A HREF="thumb_index.html">Showroom</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>
<A HREF="nav2.html">What's New</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>
<A HREF="lines.html">Lines</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>
<A HREF="map.html">Directions/Map</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>
<A HREF="contact.html">Contact Us</A><BR>
</DIV>
</BODY>
</HTML>
Jul 20 '05 #1
1 4108
In article <7q***************@newssvr16.news.prodigy.com>, BB wrote:
When the mouse floats over the defined area the text changes to bold
The button text is followed by a line seperator (navline.gif).

The concern: moving the mouse from top to bottom over the 'buttons' is
shifting all of the .gif file,s and text that fall below the highlighted
button.
URL would be better than long describtion.

Bolding makes font wider, so do not use bolding for text unless bold text
will fit to the line. Now it wraps, I think.
A:hover {font-weight: bold;} <DIV ALIGN="left">


Why not float:left? Because with that you would need to have width
according to CSS2, and then you wouldn't have this problem. As browser
don't understand change width of container when size of inner element
changes, as it will with when just changing height.

<A HREF="index.html">Home</A><BR>
<IMG SRC="images/navline.gif" WIDTH="120" HEIGHT="5" VSPACE="4"> <BR>

Fix: use width for div. Better fix: use ul instead of div, li for each a,
hide bullet, have 5px bottom padding and put navline.gif to the
background of that padding. Hide from NN4. Or if navline.gif is simple,
use bottom border

You are missing alt attributes, BTW. (people will see/hear "navline.gif"
after each link, propably alt="" is suitable)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

40
by: Greg G | last post by:
http://risky-biz.com/new/risky.html I finally got DSL service recently, but I haven't forgotten the agony of waiting for the 64th image to load before I can see ANYTHING on a page. So I will...
17
by: Jack | last post by:
Hi, This is a strange problem I am encountering. I have a asp page with a confirmation.asp page that saves data to a table. There are few text fields that are captured by the confirmation page as...
9
by: GGG | last post by:
Noticed something odd in the way bit shifting was working today. As far as I have ever heard, shifting will shift in zeros(signed ints aside) However I foudn something odd when I am shifting...
4
by: Leythos | last post by:
I've got several sites that I used DreamWeaver MX to add RollOver buttons to the pages, it also adds some javascript that pre-loads the images and does the mouse_over and such. In FireFox 1.0.1...
2
by: Wayne | last post by:
I've been having a click around Access 2007 this afternoon and have discovered some things that range from annoying to alarming. My Access 2003 menu bars, which I, like many others, use...
5
by: Amoril | last post by:
I've read quite a few different message on various boards and for some reason I'm still having trouble wrapping my head around this viewstate maintenance and trying to get these dynamically created...
3
by: Samkos | last post by:
Hi there, I am fighting with a problem I intended to believe trivial that I could not solve yet! I am trying to have a button with a variable text, that pops up another button with a...
4
by: Neil | last post by:
I previously posted about data shifting between records in my Access 2000 MDB with a SQL Server 7 back end, using ODBC linked tables. Every once in a while, data from one record mysteriously...
16
by: tvnaidu | last post by:
I have these two ON and OFF buttons html code below, based on condition I am displaying status on screen(I have mutliple lines for each LED), my row shifting when some displaying ON and some...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.