HTML - Bold Hover - Unwanted Movement
I'm having a problem with the hover pseudo-class for my navigation bar links. Whenever I put the mouse over the link the link becomes bold. The problem is that when it's made bold it moves the other four items on the navigation bar about 10 pixles to the right or left. What's the best way to fix this problem so that the links can become bold and not move the surrounding links? Here is the code for that specific section. Thanks a lot! ( Is there a better way to make space than by using  ?)
<head> <link rel="stylesheet" type="text/css" href="default.css"> <style> a:hover {font-weight: bold;} </style> </head> <body> <img src="images/title.jpg" /> <ul class="navigation"> <a href="index.htm">Home</a>   <a href="humor.htm">Humor</a>   <a href="family.htm">Family</a>   <a href="projects.htm">My Projects</a>   <a href="links.htm">My Links</a>   </ul> <hr /> --- here is the style sheet that goes with it. .navigation {text-align: center; } Similar TutorialsI'm quite new to HTML and have only just started using Div tags as oppose to large tables to produce websites, i only do this for fun and they don't go on the net. As for my problem, the div tag that contains the main content of the page has moved below the navigation bar and i want it to be sat to the right of it... Will you need the coding for the website? It looks like this.. Header Nav bar Main content Footer I want it to be like.. Header Nav bar | Main content Footer It had been like this, and i'm not sure why it changed.. Thanks in advance for any help. =] ~Josh. Hi I am quite new to web work. I have begun creating a personal website HERE, currently just the homepage finished. It works fine in Safari (MAC) but in firefox it parts seem to 'flicker' and change appearance. Do I need to add a css hack to resolve this? Does anyone know what I could be doing wrong? Thanks for any help Tom Hi, this is my first post, and I am still learning HTML, so I hope some of you guru's out there can help me! Basically I have a page that will become a template for many more. The design isn't very good but that's not my issue at the moment, I am purely concentrating on the functionality and making sure everything is in the right place when viewed on different browsers. So, everything seems to work across all browsers (even IE6) except the bottom half of the page! The logo and 'back' arrow that sit bottom right, seem to move about slightly in different browsers. In IE6 there is a massive gap between the boxes and the logo, but I can't see where the problem lies. I have used the 'absolute' tag because I can adjust the imagery and text pixel by pixel, is this a bad move? My file is attached: Thanks Jim Hi, I have got a weird problem with a page I'm writing: whenever I zigzag between my tabs inside the page, each tab's content moves a little bit to the right. you can clearly see it, if you zigzag between the "Friends" tag and the "Mail" tag, and notice how the title of the content moves a little bit to the right each time... I'm attaching my two files. Does anyone has an explanation? Thanks Well I've been using Wordpress for quite some time now... but I've come across a doozy this time and can't seem to figure it out. When viewing the post with firebug it says that "strong" tags were used throughout the post to make the thing bold... however in the actual wordpress content editor I only used the strong tag on a few words here and there. I've checked for open tags, haven't found any.... and yes I'm using the HTML editor on Wordpress, not the visual editor. The link is: http://www.pzfantasyfootball.com/blog/ Here is how the post appears in the Wordpress editor: Code: Well recently I've joined a Dynasty League started by one of the most beloved Dolphins fans known to man, <a href="http://www.phinfever.com/forums/viewtopic.php?f=1&t=40457">Tom "T-Rock" Eddie</a>. Unfortunately Tom passed away in the summer of 2008... but his memories and his influence on the Dolphins fan base still live on. I was proud to join the dynasty league, but I must say, it's been a completely different experience for me from a fantasy football perspective. <p />It seems the first line of business in a Dynasty Leagues offseason is to find replacement owners. As you may or may not know, you're supposed to try and retain the same owners year in and year out so that their teams can develop... like a real NFL Dynasty. However, for many reasons, this doesn't always happen. This league was missing roughly 4 owners, but fill ins were found quick... this is a very popular league for the name alone. After we found the owners, it was time to figure out what to do with the teams. In this case, the teams were very lopsided, so we took all of the players and all of the draft picks from the teams who were replaced, and we threw them into a draft for those 4 owners only. <!--more--> <p /><strong>The Re-Draft</strong> The rules were simple, the 4 owners who threw players in would all do a re-draft from a pool of those players to even out the teams. Trades outside of those 4 teams <strong>were</strong> allowed so anyone could get in the pool to snag some hot new talent to bolster their team. It was a tricky concept to grasp at first, but once it got going, my trade sensors went off! Since I was the first new team to join the squad I got to choose my draft position... I chose 4 out of 4 in a snake draft in order to immediately get back to back picks and to see what everyone would go after. <p /><em>Some would question the decision not to take the #1 pick because Adrian Peterson was available... but I'm trying to build a whole team here while the majority of the league already had a set team, so it seemed wise to me to wait a little while and possibly snag 2 immediate starters in a row instead of 1 then waiting for the pool to drain out 6 more guys before I got to choose again. </em> <p />Ok, 3 picks go by and of course, there go 3 RB's. I'm now looking at a somewhat talented pool of RB's left... or Drew Brees... the best fantasy QB on the market. Since I have back to back picks I have a little leniency here so I go with Brees. Ok, now my 2nd pick. *DING DING* The trade bell goes off. The owner of the Grim Reefers is a huge Rams fan and can't help but snag this pick to take Steven Jackson. In return, I get RB Brandon Jacobs and WR Roy Williams. This would be the first of many many trades I made with this team. I'm extremely excited now... I've had 2 picks and ended up with 3 starters... what more could I ask for? <p />It'd be a few long weeks before the re-draft was finally over. I was probably the hottest trader out of the redraft teams and was happy with how my final re-draft roster came about. I managed to snag Ladainian Tomlinson in like round 6 or 7 which I considered a huge steal and I know I had some more solid picks which seem to be slipping my mind right now as I write this at work... Eventually I started I forfeited the rest of my picks as the pickings were slim and I wanted to get the redraft over with. <p /> I think the biggest difference of the draft that really had me somewhat shocked, is the stock put into young players. No joke, you'll see young guys who haven't proven anything but the ability to play the bench, go way ahead of perennial pro bowlers. I didn't take that strategy as far as some did... many teams took guys who literally have a very slim chance to play at all, just because they were young and they have the "potential" to play. I tried to keep it young, but I also tried not to reach on anyone just because they were a few years younger. One guy I did snag, that I'm actually especially excited about, is Jets LB Vernon Gholston. The kid seems to be headed for a career as a pass rushing specialist and if it works out well, I could be the proud owner of a 15-20 sack LB on my roster. Yay!!! <p />Well, anyways, I'll try to get my roster up on here when I get home. We have the rookie fantasy draft coming up next weekend and I haven't done much homework for it yet... YIKES!! One word of advice I have for you avid fantasy players is, join at least 1 dynasty league. It's a whole new experience that you'll probably thoroughly enjoy. <p /><em><strong>*Warning - They're not made for the average fantasy player. </strong></em> <p /><strong>Edited on May 16, 2009 at 12:37AM</strong> Ok guys and gals... here is my roster after the re-draft and before the rookie draft. <p /><strong><em>Quarterbacks</em></strong> <ol> <li>Drew Brees*</li> <li>Carson Palmer</li> <li>Kellen Clemens</li> <li>Damon Huard</li> </ol> <p /><strong><em>Runningbacks</em></strong> <ol> <li>Brandon Jacobs*</li> <li>Ladainian Tomlinson*</li> <li>Ahmad Bradshaw</li> <li>Ray Rice</li> <li>Darren Sproles</li> <li>Brian Leonard</li> <li>JJ Arrington</li> <li>Brian Calhoun - <em>FA</em></li> <li>Chris Perry - <em>FA</em></li> </ol> <p /><strong><em>Wide Receivers</em></strong> <ol> <li>Roy Williams*</li> <li>Dwayne Bowe*</li> <li>Anthony Gonzalez*</li> <li>Reggie Brown</li> <li>Michael Clayton</li> <li>Rashied Davis</li> <li>Joey Galloway</li> <li>Brandon Lloyd</li> <li>Kevin Curtis</li> <li>Chansi Stuckey</li> <li>Sinorice Moss</li> <li>Reggie Williams - <em>FA</em></li> </ol> <p /><strong><em>Tight Ends</em></strong> <ol> <li>Tony Scheffler*</li> <li>Visanthe Shiancoe</li> <li>Martellus Bennett</li> </ol> <p /><strong><em>Defensive Lineman</em></strong> <ol> <li>John Abraham*</li> <li>Derrick Burgess*</li> <li>Jason Taylor</li> <li>Aaron Kampman</li> </ol> <p /><strong><em>Linebackers</em></strong> <ol> <li>James Farrior*</li> <li>Keith Brooking*</li> <li>Vernon Gholston</li> <li>DJ Williams</li> <li>Freddie Keiaho</li> <li>Will Witherspoon</li> </ol> <p /><strong><em>Defensive Backs</em></strong> <ol> <li>Darrelle Revis*</li> <li>Adrian Wilson*</li> <li>Bob Sanders</li> <li>Champ Bailey</li> <li>Kelvin Hayden</li> <li>Aqib Talib</li> <li>Dwight Lowery</li> </ol> <p />Now I tried to list the players in order of likeliness to start at their position. The starred (*) players are who I project to be starting at the position come the start of the season... but anything can change. I'm looking pretty smart for that Jason Taylor pickup now that the Dolphins have resigned him too. I tried to mark who I could remember are still Free Agents in the NFL... I'm hoping those players find a team soon... else they could be cut to make room for the rookies. <p />Speaking of which, I really gotta start looking into the rooks... the draft is in less than a week and I'm clueless!!! Catch ya later! I was bolding text in <p> tags like this Code: <p> <b>2. Policy</b> </p> Then I added Code: <style type="text/css"> <!-- P { font-size: 10px; } --> </style> Now" Policy" is no longer bold Hi. I have a simple website in HTML with two related CSS files. For some reason I can't seem to get the <b> or <em> tags to work in the body. I tried to use them but the text didn't change. The only way to simulate bolded text was through the use of <h2>, but that messes up the formatting. Does anyone know what might be causing this problem? Could something in the CSS files be overriding the HTML and stopping those tags from working? I am using Dreamweaver with a template to create this site and all the text that goes into the editable region inside my main cell is in bold, I can not figure out why it is showing up in bold, I have searched the code and do not know why it is doing it. On the bottom where i have the copywrite info it is not bold..... Any help would be appreciated. Thanks. http://grunionfabrication.com/r_science/index.html Hello Everyone, Can anyone help me with my html problem?? I have a form showing one chunk record at one time. This record is from a table. I want this form to bold certain text from that chunk of record. Since the record is not hardcoded/type inside the form. I want the bold funtion to be dynamic. Let say, Record one: I have an apple. I want to eat it now. Record two: I have a strawberry. I dun want to eat it now. First case, I want to bold the whole first line,with the word 'have' in it.. But this line can be anywhere in the page.. It doesn't always have specific position as long as the sentence have the word 'have' in it. Second case, I want the script to bold the word 'want' every time it finds it.. And only that word! Can anybody help me on how to do this.. I really dunno how to? Hi. I want part of the text in my table header to be bold, but I also want another part of it to be regular font. I'm kind of new to HTML. How would I do this? Thanks, Brad I was wondering how to make text bold, italicized, and underlined using css. I am new at css. Thanks 4 the help! I embedded a flash slide show in my website. I'ts centered and looks fine in Firefox, Safari and Opera. In Internet explorer it's slightly left of center. I was told the explanation below which I think I've adjusted the html to but now I'm not sure as it's still off centre.Any idea where I'm going wrong please. I still can't figure out why I E appears to show text as bold instead of normal weight. your <td> width and CU3ER width don't match. Problem is in your page html code, not CU3ER itself. Link below http://bajor.servers.rbl-mer.misp.co...dge/manip.html I inserted a SWF inside a table and it should fit perfectly. However, the table streches a bit and makes the background repeat for a couple of pixels which totally screws the layout. Here is my website: http://jlcq.uuuq.com/jl.html I'm talking about the two horizontal lines on each side of the banner. It looks like the SWF has some kind of margin. How can i delete it so it fits perfectly? If you have the time take a look at my code or download the site and find a way to modify the code so that it fits. Note that the problem also occurs if I insert an image in the same spot instead of a SWF. Thanks! Hey everyone, I was wondering how I can get rid of a scrollbar that only shows up in IE, when I embedded another webpage inside a webpage. I specified size and the other webpage is only a few lines of text so it doesn't need to scroll to see everything. I don't have this problem in FF. HTML Code: <object data=siteupdates.html width="100%" height="212"> </object> Thanks This is my very first post on this forum, so please, be gentle with me. I write my websites in HTML code but recently I seem to have created an anomaly that I cannot get to the bottom of. If you pop over to this page: http://website.lineone.net/~barrybboor/tirol58.html you will see a very large space below the 'FULL RESULT' line and the start of the result table. According to the coding I have, there shouldn't be any such space but I can see no reason for it and cannot find a way to reduce it. Can anyone help a poor elderly novice, please? Hi! I've looked it over and over ant I can't seem to find the solution to this. A huge space appears on my webpage without permission! Here is the code HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function popup(mylink, annonces) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, annonces, 'width=600,height=600,scrollbars=yes'); return false; } // </SCRIPT> <TITLE>Duo: balalaika et piano -- Dmitri Nassyrov et Victoria Khramova</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset=Windows-1251"> <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0"> <META NAME="Author" CONTENT="Dmitri Nassyrov"> <META NAME="KeyWords" CONTENT="balalaika, Victoria, Khramova, Dmitri, Nassyrov, concerts, piano, duo, stringsandkeys, douce, soiree, histoire, du, balalaika"> <META NAME="Description" CONTENT="Le duo du balalaïka et du piano: Dmitri Nassyrov et Victoria Khramova, ont un repertoire tres varié: folklorique, classique, jazz, et autres... "> <TITLE>Duo:balalaïka et piano - Dmitri Nassyrov et Victoria Khramova</TITLE> <link rel="stylesheet" type="text/css" href="style.css" /> </HEAD> <div id="container"> <BODY BGCOLOR="#000000" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000" BACKGROUND="../img/bcknd.jpg" bgproperties="fixed"> <script language="javascript"> var u=13200; var vsbl=0; var l=''; </script> <script type="text/javascript" language=Javascript src="http://h1.hitslog.com/counter.js"></script> <script language="javascript"> document.write('<a href=http://hitslog.com/><img border=0 width=1 height=1 src=http://h1.hitslog.com/hl.php?'+l+'></a>'); </script> <noscript> <a href="http://hitslog.com/"><img border=0 width=1 height=1 src="http://h1.hitslog.com/hl.php?u=13200" alt="MySpace tracker"></a></noscript> <TABLE id="main"> <tR width=720 height=160> <td valign=top width=615 height=160><IMG width=615 height=160 alt="Duo: balalaïka et piano - Dmitri Nassyrov et Victoria Khramova" SRC="../site/IMG/HEADER2.gif"> </td> <td> <table valign=center width=105 height=75 cellpadding=0> <tr class="lang"> <img alt="En Français" border=0 src="../site/img/francaisclik.gif" > </tr> <tr class="lang"> <a href="../eng/index.html"><img alt="In English" onmouseover="this.src='../site/img/englishon.gif'" onmouseout="this.src='../site/img/english.gif'" onclick="this.src='../site/img/englishclik.gif'" border=0 src="../site/img/english.gif"></a> </tr> <tr class="lang"> <a href="../rus/index.html"><img alt="По-Русски" onmouseover="this.src='../site/img/russianon.gif'" onmouseout="this.src='../site/img/russian.gif'" onclick="this.src='../site/img/russianclik.gif'" border=0 src="../site/img/russian.gif"></a> </tr> <tr width=100 height=85> <img alt="Duo: balalaïka et piano - Dmitri Nassyrov et Victoria Khramova" src="../site/img/sideheader.gif"> </tr> </table> </td> </tR> <!--The big space is here--> <TR> <td colspan=2> <table width=720> <tr> <td valign=top> <TABLE valign=top> <TR> <TD class="menu"><A HREF="INDEX.HTML"><img src="../img/bienvenueclik.gif" alt="Bienvenue" border="0"></a></TD> </TR> <TR> <TD class="menu"><A HREF="DUO.HTML"><img src="../img/leduo.gif" alt="Notre duo" onmouseover="this.src='../img/leduoon.gif'" onmouseout="this.src='../img/leduo.gif'" onclick="this.src='../img/leduoclik.gif'" border="0"></A></TD> </TR> <TR> <TD class="menu"><A HREF="concerts.HTML"><img src="../img/concerts.gif" alt="Nos concerts" onmouseover="this.src='../img/concertson.gif'" onmouseout="this.src='../img/concerts.gif'" onclick="this.src='../img/concertsclik.gif'" border="0"></A></TD> </TR> <TR> <TD class="menu"><A HREF="audio.HTML"><img src="../img/audio.gif" alt="Notre musique" onmouseover="this.src='../img/audioon.gif'" onmouseout="this.src='../img/audio.gif'" onclick="this.src='../img/audioclik.gif'"border="0"></A></TD> </TR> <TR> <TD class="menu"><A HREF="historique.HTML"><img src="../img/historique.gif" alt="L'Histoire du balalaïka" onmouseover="this.src='../img/historiqueon.gif'" onmouseout="this.src='../img/historique.gif'" onclick="this.src='../img/historiqueclik.gif'" border="0"></A></TD> </TR> <TR> <TD class="menu"><A HREF="liens.HTML"><img src="../img/liens.gif" alt="Liens" onmouseover="this.src='../img/lienson.gif'" onmouseout="this.src='../img/liens.gif'" onclick="this.src='../img/liensclik.gif'" border="0"></A></TD> </TR> <TR> <TD class="menu"><A HREF="contact.HTML"><img src="../img/contact.gif" alt="Comment nous rejoindre" onmouseover="this.src='../img/contacton.gif'" onmouseout="this.src='../img/contact.gif'" onclick="this.src='../img/contactclik.gif'" border="0"></A></TD> </TR> </TABLE> </tD> <TD VALIGN=top> <table id="text" height=100% width=500 cellpadding=20 style="BACKGROUND: url('../site/img/textbcknd.jpg'); "> <tr> <!--<marquee id="test" onMouseOver="document.all.test.stop()" onMouseOut="document.all.test.start()" scrollamount="2" scrolldelay="20" width="100%" height="51" behavior="scroll" direction="left"><font face="arial" align=middle><i> <A HREF="annonces3.html" onClick="return popup(this, 'annonces',true)"><b>17 novembre - 20:00</b></A><br> Festival "From Russia With Love"<br> à la bibliothèque publique juive. </i></font></marquee>--> </tr> <tr> <td valign=top> <font face="times new roman" size=3> <h2>Un duo, c'est indivisible...</h2> <p align=justify>Dans un duo, le rôle de chaque musicien n'est pas seulement de compléter son partenaire, mais aussi de souligner la sonorité de son instrument.</p> <p align=justify>Notre duo est assez particulier et assez unique à Montréal. Les deux instruments composant notre duo sont: le piano et le balalaïka - instrument folklorique russe. Les possibilitées de cette union sont surprenantes, dans le répertoi folklore, classique, jazz...</p> <hr width=95%></hr> <p>Sur ce site, vous trouverez de l'information sur nos <A HREF="concerts.HTML">concerts</A>, vous pourrez écouter nos <A HREF="audio.HTML">enregistrements</A>, lire nos <A HREF="DUO.HTML">biographies</A>, et plus encore.</p> <p>Et, bien sûr, nous serons heureux de vous voir à nos concerts!</P> <p><i>Dmitri Nassyrov et Victoria Khramova</i></p> </TD> </tr> </table> </td> </tr> </table> </td> </TR> </TABLE> <font face="arial" size=1 align=right> &nb sp; &nb sp; &nb sp; Dmitri Nassyrov et Victoria Khramova © Tous droits réservés.</font> </BODY> </div> </HTML> I put "The big space is here" where the space occurs. The weird thing is that if I open the file in some html editing software (frontpage), it looks fine, but once I open it in IE, the space appears. Here is the style.css file if it needs checking: HTML Code: body { text-align: center; background-color: rgb(239,197,137); } #container { margin: 0 auto; } #main { border:0px; /* border="0" */ border-collapse:collapse; /* cellspacing="0" */ } #top { border:0px; /* border="0" */ border-collapse:collapse; /* cellspacing="0" */ } tr.lang { horizontal-align:left; width:100px; height:25px; } td.menu { width:220; height:40; } table { border-collapse:collapse; } #text { padding:20px; } Any help is appreciated. Thank you for your time! I've been writing all of my HTML in notepad since I started, and Id really like to keep it that way, but the browser seems to treat line breaks (in notepad) between elements as a space character in certain instances. For example, say I have HTML Code: <img1><img2> <img3> <img4> in the browser, that will render every image on the same line, but with a physical white space between img2, img3, and img 4 example: [1][2] [3] [4] in the past ive just sucked it up and put everything on the same line, but in larger projects that gets messy very quickly... any input that i'snt "use something better" is appreciated, thanks. www.artdied.com I've created this website using frames and am now getting lines appearing at the edges of the frames on the bottom and right side when the browser window is at certain sizes. I have no idea clue what's causing it or how to get rid of it. Any ideas? Much thanks! Hey; I'm trying to build this menu in a table. Each row has an image, which I'm using for a rollover. Altogether, the table should be 202 x 285 pix. The problem is, 5 pixels of blank space are being added under every image, (in the same row as the image), and I'm not sure why. Altogether, it's making my table 45 pix too large. Any help would be appreciated. HTML: <div id="menu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td ><img alt="Home" src="images/regHome.jpeg" /></td></tr> <tr><td><img alt="Program Information" src="images/regInformation.jpeg" id="Image2" onmouseover="MM_swapImage('Image2','','images/rollOverInformation.jpeg',1)" onmouseout="MM_swapImgRestore()" /></td></tr> ...etc</table></div> CSS: #menu { margin: 0 auto; text-align: left; color: #000000; font-family:Arial; position:relative; float:left; font-size: 18px; top:144px; !top:140px; height:271px; !height:100px; _height:100px; width:202px; !width:10px; _width:10px; float:left; background-color:#00FF00; } |