I just need that simple border that goes directly underneath the navbar like the one in the image. I know that it is 2px solid. I tried to place the "border-bottom: 2px solid;" into one of my anchors below but it doesn't seem to work. I greatly appreciate any help! a { height: 15pt; color: #333333; padding: 0px; margin: 0px; } a:hover { background-color: #333333; color: #FFFFFF; } a.navbar { font-size: 11pt; border: solid 1 #333333; border-bottom: none; padding: 2px; height: 15pt; width: 80pt; color: #848EB4; background-color: #333333; text-decoration: none; text-align: center; font-weight: bold; margin-top: 12px; } a:hover.navbar { font-size: 11pt; border: solid 1 #333333; border-bottom: none; background-color: #848EB4; color: #333333; text-decoration: none;
It might be easier if you paste the html here. I'm not sure what I could suggest unless I saw more of what you were working with. I could be wrong, but I don't think you're going to get the border that is displayed above from putting the "border: 2px solid" inside the .a {} tag. If you share the code for the section in question, I may be able to help you out.
Thanks, here is the whole html page that I have so far. I put it everything in a table and the navbar in its own table. <html> <head> <title>Yellowstone Caldera</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <a name="top"/> <table cellspacing="" border="0" style=" border-top: 1pt #333333 solid; border-left: 1pt #333333 solid; border-right: 3pt #333333 solid; border-bottom: 3pt #333333 solid"> <tr> <td> <h1 class="background">VOLCANOES OF THE NORTHWEST</h1> <img style="height: 350px;" class="margin" src="images/yellowstone_falls.jpg"/> <br/> <span class="caption">Yellowstone Falls, Yellowstone Caldera, Wyoming (USGS Photo by David E. Wieprecht)</span> </p> <h1 class="headline">Yellowstone: Mouth of the Volcano</h1> <table cellspacing="0" border="0"> <tr> <td> <a href="#first_anchor" class="navbar">Formation</a> </td> <td> <a href="html/map.html#attractions" class="navbar">Attractions</a> </td> <td> <a href="#second_anchor" class="navbar">Seismology</a> </td> <td> <a href="mailto:info@volcanofacts.com?Subject=Inquiry" class="navbar">Email</a> </td> </tr> </table> <p class="center"> Long before any recorded human history in Yellowstone, a massive volcanic eruption spewed an immense volume of ash that covered all of the western U.S., much of the Midwest, northern Mexico and some areas of the eastern Pacific. The eruption dwarfed that of Mt. St. Helens in 1980 and left a caldera 30 miles wide by 45 miles long. </p> <p class="center"> That climactic event occurred about 640,000 years ago, and was one of many processes that shaped Yellowstone National Park--a region once rumored to be "the place where hell bubbles up." Geothermal wonders, such as Old Faithful, are evidence of one of the world's largest active volcanoes. These spectacular features bemused and befuddled the park's earliest visitors, and helped lead to the creation of the world's first national park. </p> <p class="center"> Fur trappers' fantastic tales of cauldrons of bubbling mud and roaring geysers sending steaming plumes skyward made their way back east. Several expeditions were sent to investigate, opening the West to further exploration and exploitation. In 1871, Ferdinand Hayden led an expedition that included artist Thomas Moran and photographer William H. Jackson. They brought back images that helped convince Congress that the area known as Yellowstone needed to be protected and preserved. </p> <p class="center"> In 1872, President Ulysses S. Grant signed a law declaring that Yellowstone would forever be "dedicated and set apart as a public park or pleasuring ground for the benefit and enjoyment of the people." </p> <a name="first_anchor"/> <h2>Formation</h2> <a href="#top" class="return2">Return to Top</a> <p class="center"> At the heart of Yellowstone's past, present, and future lies volcanism. Catastrophic eruptions occurred here about 2 million years ago, then 1.2 million years ago, and then 600,000 years ago. The latest eruption spewed out nearly 240 cubic miles of debris. What is now the park's central portion then collapsed, forming a 28- by 47-mile caldera. The magmatic heat powering those eruptions still powers the park's famous geysers, hot springs, fumaroles, and mud pots. The spectacular Grand Canyon of the Yellowstone River provides a glimpse of Earth's interior: its waterfalls highlight the boundaries of lava flows and thermal areas. Rugged mountains flank the park's volcanic plateau, rewarding both eye and spirit. </p> <p class="center"> Yellowstone Caldera is one of the largest and most active calderas in the world. The spectacular geysers, boiling hot springs, and mud pots that have made Yellowstone famous -- and even the strikingly beautiful Grand Canyon of Yellowstone through which the Yellowstone River plunges -- owe their existence to the tremendous volcanic forces that have affected the region during the past 2 million years. Cataclysmic eruptions 2.0, 1.3, and 0.6 million years ago ejected huge volumes of rhyolite magma; each eruption formed a caldera and extensive layers of thick pyroclastic-flow deposits. The youngest caldera is an elliptical depression, nearly 80 kilometers long and 50 kilometers wide, that occupies much of Yellowstone National Park. The caldera is buried by several extensive rhyolite lava flows erupted between 75,000 and 150,000 years ago. </p> <a name="first_anchor"/> <h2>Seismology</h2> <a href="#top" class="return">Return to Top</a> <p class="center"> The Earth's crust beneath Yellowstone National Park is still restless. Precise surveys have detected an area in the center of the caldera that rose by as much as 86 centimeters between 1923 and 1984 and then subsided slightly between 1985 and 1989. Scientists do not know the cause of these ups and downs but hypothesize that they are related to the addition or withdrawal of magma beneath the caldera, or to the changing pressure of the hot groundwater system above Yellowstone's large magma reservoir. Also, Yellowstone National Park and the area immediately west of the Park are historically among the most seismically active areas in the Rocky Mountains. Small-magnitude earthquakes are common beneath the entire caldera, but most are located along the Hebgen Lake fault zone that extends into the northwest part of the caldera. A magnitude 7.5 earthquake occurred along this zone in 1959. </p> <p class="center"> The Yellowstone region has produced three caldera-forming eruptions in the past 2 million years, two of those among the largest eruptions known to have occurred on Earth (each more than 1,000 cubic kilometers). Yellowstone's hydrothermal system is among the largest and most active in the world, and its historical seismicity and uplift are comparable to those at the most active calderas. </p> <p class="center"> The Yellowstone caldera region hosts the world's largest know hydrothermal system, highlighted by numerous geysers. This hydrothermal system accounts for an average heat flow from the caldera area 40 times greater than the global average. Although the latest eruptions were approximately 70,000 years ago, the immense hydrothermal system and a variety of geophysical characteristics indicate that magma still underlies the Yellowstone caldera at a shallow depth. A large negative gravity anomaly, low magnetic intensity, high electrical conductivity, shallow swarm seismicity, and large delays and high attenuation of seismic waves are all consistent with this inference.</p> <address> Volcanoes of the Pacific Northwest • Seattle<br/> <a href="mailto:info@volcanofacts.com?Subject=Inquiry"> </a> </address> </table> </body> </html> </html>
One solution would be to enclose the table in a div: [B]<div class="nav">[/B] <table cellspacing="0" border="0" > <tr> <td> <a href="#first_anchor" class="navbar">Formation</a> </td> <td> <a href="html/map.html#attractions" class="navbar">Attractions</a> </td> <td> <a href="#second_anchor" class="navbar">Seismology</a> </td> <td> <a href="mailto:info@volcanofacts.com?Subject=Inquiry" class="navbar">Email</a> </td> </tr> </table> [B]</div>[/B] Code (markup): another solution would be adding class="nav" to your table (and removing the div), but that will cause the width of your table columns to stretch. with a css: .nav { border-bottom: 2px solid #000; width: 100%; } Code (markup):
Using that above, you could scrap the navbar table: <div class="nav"> <a href="#first_anchor" class="navbar">Formation</a> <a href="html/map.html#attractions" class="navbar">Attractions</a> <a href="#second_anchor" class="navbar">Seismology</a> <a href="mailto:info@volcanofacts.com?Subject=Inquiry" class="navbar">Email</a> </div> Code (markup): and for the .nav css .nav { border-bottom: 2px solid #000; width: 100%; text-align: center; } Code (markup): which in FireFox shows as the image above, but in Internet Explorer it has a small gap between the links and the border. If you don't care about there being a small gap, using the above example from glorie will get both Firefox & Internet Explorer (only browsers on my machine to test with) having what looks to be the same size gap. . . Otherwise, someone else might have some input now that the code has been posted.
The following works well in Firefox, Konqueror (Safari?) and IE. Opera shows a small gap, as described above for IE. One or two px bottom padding will get rid of it, but the li will overlap the bottom border in IE and Konqueror. I'd opt to not worry about Opera in this case, as it's not a serious matter. The markup is an unordered list; which is what a menu is, both structurally and syntactically. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <title> menu example </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { font: 100%/1.4 verdana, sans-serif; } p { font-size: 1em; } #menu-holder { padding: 1px 8px; background-color: #848eb4; color: black; } ul { padding: 0; margin: 1.2em 0; list-style: none; text-align: center; border-bottom: 2px solid black; } #menu li { display: inline; padding: 2px 4px; margin: 0 1px; background-color: black; color: #848eb4; text-transform: capitalize; font: bold 1.2em/1 georgia, serif; } /*]]>*/ </style> </head> <body> <div id="menu-holder"> <ul id="menu"> <li>Formations</li> <li>Seismology</li> <li>Attractions</li> <li>map</li> <li>email</li> </ul> </div> </body> </html> Code (markup): cheers, gary