I have this class:
.search-modal-navigation-link {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
height: 32px;
font-size: 12px;
text-align: center;
float: left;
margin-right: 22px;
}
And I tried targeting all links in this class so I did this:
a.search-modal-navigation-link:link {
text-decoration: underline;
color: red;
}
and I get nothing, why is this? Thank you :))!
Edit: My Html
<div class="search-modal-navigation-tab">
<div class="search-modal-navigation-link"><a href="#">
<img src="img/icons/01-passive.png" width="20" height="21" border="0" /><BR />
All Events</a></div>
<div class="search-modal-navigation-link">
<img src="img/icons/01-passive.png" width="20" height="21" /><BR />
All Events</div>
</div>
Your selector isn't looking for links in an element with that class, it's looking for links with that class. You need to change it to this:
.search-modal-navigation-link a:link {
text-decoration: underline;
color: red;
}
How about
.search-modal-navigation-link a {
text-decoration: underline;
color: red;
}
Related
This is my first website I am trying to build but I am struggling to get my website looking good on all screen sizes.
On full screen everything looks great, but as soon as I hit around 1541px everything starts to overlap with one another.
Nav bar at 1541px
When I reach 982px the navbar collapses down into a dropdown menu, which is what I want but the spacing still looks messy
Nav bar at 982px
This is my current code
<template>
<header>
<div>
<div>
<b-row>
<b-navbar toggleable="lg" variant="light" fixed="top">
<b-col class="col-md-3"
><b-navbar-brand tag="h2" class="mb-2">
<img
:src="require('../assets/southBankElectrical.png')"
width="450"
height="300"
style="margin-top: -100px; margin-bottom: -100px"
class="d-inline-block"
/>
</b-navbar-brand>
</b-col>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-col md="6"
><b-nav-item class="nav"
><router-link class="nav-a" to="/"
>Home</router-link
></b-nav-item
>
</b-col>
<b-col md="6">
<b-nav-item-dropdown text="Services" class="services">
<b-dropdown-item>
<router-link class="dropDownNav" to="/Cctv"
>CCTV</router-link
>
</b-dropdown-item>
<b-dropdown-item>
<router-link class="dropDownNav" to="/ElectricVehicle"
>Electric Vehicle</router-link
>
</b-dropdown-item>
<b-dropdown-item>
<router-link class="dropDownNav" to="/Aircon"
>Aircon</router-link
></b-dropdown-item
><b-dropdown-item>
<router-link class="dropDownNav" to="/Smoke"
>Smoke Detection</router-link
></b-dropdown-item
><b-dropdown-item>
<router-link class="dropDownNav" to="/Commercial"
>General Electrical/ Data</router-link
></b-dropdown-item
>
</b-nav-item-dropdown>
</b-col>
<b-col md="6"
><b-nav-item class="nav">
<router-link class="nav-a" to="/projects"
>Projects</router-link
></b-nav-item
></b-col
>
<b-col md="6"
><b-nav-item class="nav">
<router-link class="nav-a" to="/contact"
>Contact</router-link
></b-nav-item
></b-col
>
</b-navbar-nav>
</b-collapse>
<b-col md="2">
<h1 class="number">
<b-icon-telephone-fill
style="color: rgb(235, 100, 33)"
></b-icon-telephone-fill>
0423564335
</h1></b-col
>
<b-col md="2">
<router-link class="nav-a1" to="/Contact"
>Request a Quote Today!</router-link
>
</b-col>
</b-navbar>
</b-row>
</div>
</div>
</header>
</template>
And this is my CSS
<style>
#import url("https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital#0;1&display=swap");
.nav-a:hover {
color: rgb(235, 100, 33);
}
.dropdown-toggle:hover {
color: rgb(235, 100, 33) !important;
}
.dropdown-toggle {
color: #000000 !important;
}
.dropdown {
font-size: 22px;
color: #000000;
font-weight: bold;
font-family: "Quattrocento Sans", sans-serif;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropDownNav:hover {
color: rgb(235, 100, 33);
}
.dropDownNav.router-link-exact-active {
color: rgb(235, 100, 33);
}
.dropDownNav {
font-size: 20px;
color: #000000;
font-weight: bold;
text-align: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 25px;
font-family: "Quattrocento Sans", sans-serif;
border-radius: 10px;
text-decoration: none;
display: block;
}
.nav-a {
font-size: 25px;
color: #000000;
text-align: center;
font-weight: bold;
font-family: "Quattrocento Sans", sans-serif;
text-decoration: none;
}
.nav-a.router-link-exact-active {
color: rgb(235, 100, 33);
text-decoration: underline;
}
.nav-a1 {
font-size: 24px;
color: #ffffff;
text-align: center;
padding-top: 12px;
padding-right: 10px;
padding-bottom: 12px;
padding-left: 10px;
border-radius: 10px;
text-decoration: none;
background-color: rgb(235, 100, 33);
}
.nav-a1.router-link-exact-active {
color: rgb(255, 255, 255);
text-decoration: none;
}
.nav-a1:hover {
color: rgb(0, 0, 0);
transition: 0.75s;
}
#media (max-width: 1709px) {
.nav-a1 {
font-size: 15px;
}
.number {
font-size: 25px;
padding-left: 10px;
}
.d-inline-block {
padding-right: 100px;
}
}
#media (max-width: 991px) {
.services {
padding-left: 15px;
}
}
</style>
I need to make my CSS Script Compatible with Mozilla and Google Chrome and also I need it to be full screen on a laptop and a desktop computer. Right now it is all over the place.Saw a few tips but I have no idea how to implement it. Hope someone can guide me along.
CSS SCRIPT
<style>
#logo{
background-image:url(logo.png);
width:180px;
height:150px;
}
#header{
background-color: rgb(37, 37, 48);
box-sizing: border-box;
color: rgb(49, 49, 49);
display: block;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height:auto;
line-height: 25.3968px;
min-height: 1px;
font-weight:100;
width:110%;
position:fixed;
margin-left:-1%;
margin-top:-1%;
z-index:10000;
}
button{
font-size: 12px;
line-height: 1;
display: inline-block;
text-transform: uppercase;
font-weight: bolder;
padding: 16px 18px;
background-color: #90ef7f;
color: #313131;
border: 0;
border-radius: 2px;
margin: 1px;
text-align: center;
}
button:hover{
background-color: #90ef7f;
color: #eeeaea;
}
#header h1,.demo h3{text-transform:none}
#header{border-bottom:2px inset #f6f6f6}
#header h1{text-align:left;color:#fff;margin:0 0 0 0}
h1{margin-bottom:1em}
a.btn.btn-theme{width:13%;color:#eeeaea;padding:5px;background- color:#34343e;border:1px solid #34343e;border-bottom:0;border-radius:0;font-weight:400;margin:0 10px 0 0}
a.btn.btn-theme:hover{color:#90ef7f}
a.btn.btn-theme.disabled{background-color:#f6f6f6;color:#313131;opacity:1}
.btn-group.theme{width:100%; font-size:16px;text-transform: uppercase;margin-top:-4%;}
#div {
width:220px;
height:100px;
text-transform:uppercase;
font-size:16px;
font-family:haveltica;
text-align:center;
font-weight:bold;
color:lightblue;
margin-top:10px;
}
h1{
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 35px;
line-height: 44px;
margin-bottom: 20px;
margin-right: 0px;
margin-top: 20px;
text-align: left;
text-transform: none;
width: 940px;
zoom: 1;
}
HTML Codes
<div id="header" class="hidden-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id ="logo"></div>
<div class="container" style = "margin-top:-10%;padding:2%"><h1>REPORT MODULE</h1>
<div id = "div" href="javascrit:void(0);">Welcome <?php echo $_SESSION['DIV_USERNAME']; echo '<br>';?>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="btn-group theme">
<?php
//creating menu
foreach((array)$profile_menu as $key=>$val)
{ ?>
<a class="btn btn-theme" href="<?php echo $key ?>"><?php echo $val ?></a>
<?php } ?>
$profile_menu = array(
'a.php'=>'a',
'b.php'=>'b',
'c.php'=>'c',
'd.php'=>'d',
'e.php'=>'e',
'f.php'=>'f',
'logout.php'=>'Logout'
);
?>
</div>
</div>
</div>
</div>
</div>
Not entirely sure what you are trying to do here, as you are using CSS name references that you have not included.
You CSS looks OK to me, but somewhat messy. I would suggest using the DOM explorer to look at each element that is not display correctly and make adjustments to its CSS reference block.
I am using the below code and getting a problem where if I resize the browser my mainpage div wraps below the menubar div, I have tried min and max width and nothing has worked. Any help would be greatly appreciated. I want the mainpage div to not drop below the menubar and stay side by side with it even if the browser is made smaller.
HTML:
<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center"> <!-- This is the code for the menubar, to add a new option to the menubar-->
<!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
link element. -->
<ul>
<li style="align: center;"><img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126" /></li>
<li >Home</li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>rhtrhtrh</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>wrefwefwefwef</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->
<div id="mainpage" class="auto-style1" style="height: 486px; float:left; color: #000000; font-size: 11pt;">
<p> -0je45iwgtjj4eg0prjegtgfjotrsjgse'[agpraeogjk-odetkgbokporgkspfkdgkpfdgkpdfkg</p>
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
CSS:
#mainpage
{
border: thin solid #008852;
width: 84%;
float: left;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
}
#mainpage a:link, #mainpage a:visited
{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#menubar ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#menubar a:link, #menubar a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
Wrap both of your div's in another element with a fixed width. Then float the menu bar and the main page to the left.
div {
width:50px;
height:50px;
border:1px solid black;
float:left;
}
section {
width:110px;
}
Something like the following: http://jsfiddle.net/uBgg3/
What you are trying to build can be done as follows.
<div id="menubar">
<div class="logo"><img alt="logo" src="http://placehold.it/126x63" /></div>
<ul>
<li>Home</li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>rhtrhtrh</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>wrefwefwefwef</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<div id="mainpage">
<p>Some sample text...</p>
</div>
and the CSS:
#menubar {
width: auto;
float: left;
margin-right: 20px;
}
#mainpage {
overflow: auto;
border: thin solid #008852;
background-color: #EDEFEE;
height: auto;
min-height: 500px;
border-radius: 20px;
color: #008852;
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#menubar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menubar a:link, #menubar a:visited {
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: auto;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
}
See fiddle at: http://jsfiddle.net/audetwebdesign/sXNLT/
I cleaned up the inline styles since they were getting in the way. Use CSS rules, so much easier to maintain.
Float your #menubar to the left and set height:auto so that you can see all the links without any overflow issues.
On #mainpage, no need to float and set overflow: auto to prevent the content from wrapping around the floated menu.
Finally, no need for position: fixed in your navigation links.
You could put the two divs in a html table (2 columns, 1 row) and set the width of your body column to a specific value or percentage.
I'm having trouble with a background div cutting off randomly in Internet explorer...
Here is how it should look like, taken from a webkit/chromium browser..
Here is how Internet Explorer thinks it should look like...
The web page can be found at http://beta.surrealholidays.com.
any feedback on how to fix this would be appreciated.
HTML Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="/css/alt.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script src="/js/flash.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<title>Welcome to Surreal Holidays</title>
</head>
<body class="oneColFixCtr">
<div id="bannerph">
<div id="bannerint">
<div id="logoph" align="left">
<p><img src="/images/logos/newlogo.png" width="204" height="99" alt="Site Logo"></p>
</div>
<div id="callus" align="right">
<p><br>
Call Us:</p>
<h1>0845 003 5043</h1></div>
<p> </p>
</div>
</div>
<div id="page">
<div id="links">
Homepage Luxury Destinations Private Tours Terms & Conditions Enquire News Contact Us</div>
<div id="ct">
<div id="navig">
<div class="c2 c1" id="navi_direc">
<div align="left">Homepage ></div>
</div>
<div id="navi_newsl"> Subscribe to our Latest Offers</div>
</div>
<div id="img">
<p><img src="/images/mainstory.jpg" width="995" height="400"> </p>
</div>
<div id="content">
<div id="hp_welcome">
<h2 align="left">Private Luxury Escorted Tours in Thailand </h2>
<p align="left"> </p>
<p align="left" class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2"> </p>
<h2 align="left" class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p align="left" class="c2"> </p>
<h2 align="left" class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p align="left" class="c2"> </p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h3 align="center"><strong>Our Latest Offers</strong></h3>
<p align="center"> </p>
<p align="center">
<h3>Offers Coming Soon!</h3>
</p>
<p align="center"> </p>
<h3 align="center">Layana Resort and Spa<br>
From £89 pppn
</h3>
<p> </p>
</div>
<div id="hp_ftcol2foll">
<h3>Follow Us</h3>
<p align="center" class="c2"><img src="/images/social_icons/facebook.png" alt="Find us on Facebook" width="64" height="64" border="0"><img src="/images/social_icons/twitter.png" alt="Follow us on Twitter" width="64" height="64" border="0"><img src="/images/social_icons/google.png" alt="Find us on Google Plus" width="64" height="64" border="0"><img src="/images/social_icons/youtube.png" alt="Watch us on Youtube" width="64" height="64" border="0"><img src="/images/social_icons/vimeo.png" alt="Watch us on Vimeo" width="64" height="64" border="0"><br>
<br>
</p>
</div>
<div id="hp_ftcol2news">
<h3><strong>Latest News</strong></h3>
<h3>20 March 2012</h3>
<h3><u><strong>Welcome To Our New Website!</strong></u>
<br>
We have now launched our brand new website, for an improved compatability for Tablet Devices, as well as a much faster loading speed for a enhanced browsing experience. For more information about this update, <br>
<u>Click Here</u>.</h3>
<p> </p>
<p align="center" class="c2"><br>
<br>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550<br>
<strong>© Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong><br>
<div id="f_php">
<div id="f_ph1"><img src="/images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
<p>Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
Disclaimer | Privacy Policy | Copyright</p>
</div>
<div id="f_ph3">
<img src="/images/logos/logo-atol.png" width="45" height="45" alt="A"><img src="/images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div>
</body>
</html>
And here is the stylesheet:
#charset "utf-8";
/* CSS Document */
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #fff;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background: url(/images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page {
width:995px;
margin: 0 auto;
padding: 0px;
}
#ct {
background-image:url(/images/bg.png);
overflow:visible;
}
#bannerph {
width: 100%;
background-image:url(/images/banner.png)
}
#bannerint {
width: 995px;
height: 140px;
padding: 10px;
margin: 0 auto;
}
#logoph {
width: 300px;
float: left;
padding: 10px;
}
#callus {
width: 500px;
float: right;
}
#links {
background-image: url(/images/logos/li.jpg);
background-repeat: repeat-x;
color: #fff;
vertical-align: middle;
padding: 10px;
margin-bottom: -2px;
}
#linkblock{
padding: 10px;
}
#navig {
height: 30px;
width: 995px;
padding: 10px;
}
#navi_direc{
float:left;
width: 500px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
}
#navi_direc a {
color: #000
}
#navi_newsl{
float: right;
width: 449px;
font-size: 12px;
}
#content {
height: auto;
background-image: url(/images/mainbggrad.jpg)
font-size: 12px;
overflow:hidden;
}
#content h2 {
font-size: 18px;
color: #7d6543;
font-weight: bold;
line-height: 22px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}
#content h3 {
font-size: 14px;
font-weight: normal;
color: #fff;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h4 {
font-size: 13px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding-left: 10px;
padding-right: 10px;
}
#col2 {
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #FFF;
}
#content p {
line-height: normal;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #000;
}
#hp_welcome{
width: 550px;
float:left;
padding: 10 px;
color: #7d6543;
}
#hp_ftcol2off {
width:380px;
float:right;
margin: 10px 10px 0 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
}
#hp_ftcol2news {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2foll {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2off table tr td {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
width: 995px;
height: auto;
overflow:auto;
}
#f_tr{
height:auto;
}
#f_php{
width: 995px;
height: 60px;
}
#f_ph1{
width:325px;
float:left;
}
#f_ph2{
width:340px;
float:left;
}
#f_ph3{
width:325px;
float:left;
}
#footer {
font-size: 12px;
color: #fff;
background-image: url(/images/logos/ftr.jpg);
background-repeat: repeat-x;
height: 150px;
padding-bottom: -5px;
}
#callus {
padding-right: 30px;
}
#navi_newsl a:link {
color: #000;
text-decoration: none;
}
#navi_newsl a:visited {
text-decoration: none;
color: #000;
}
#navi_newsl a:hover {
text-decoration: underline;
color: #000;
}
#navi_newsl a:active {
text-decoration: none;
color: #000;
}
.oneColFixCtr #bannerint #callus h1 {
color: #7d6543;
}
.oneColFixCtr #bannerint #callus p {
color: #7d6543;
}
#warning {
background-image:url(/images/warning%20bar.png);
height: 50px;
background-repeat:no-repeat;
}
#intwarn {
margin: 13px;
}
#intwarn p {
color: #fff
}
#warning #intwarn p {
font-size: 20px;
}
.oneColFixCtr #page #content table {
text-align: left;
font-size: 12px;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news {
color: #FFF;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news p b {
color: #FFF;
text-decoration: underline;
}
If anyone has suggestions on how I can stop these divs cutting off prematurely (bannerph and ct) I would be extremely thankful.
The default value for a div overflow is visible so declaring this in the CSS wouldn't have any effect unless you were overriding it from elsewhere.
Try using overflow: hidden; on #ct and #col2 as this should clear the floating column on the right.
It would help to know the exact version of the ie browser that is showing this issue. I tested the site in ie 7 and firefox and could not replicate the issue. in ie7 the div is not cut off, but you also do not have opacity on it as well. I would suggest elaborating on the details a little bit, because it could be a number of compatibility issues you are having. All the comments and answers so far have been guesses since we do not have all the information needed to determine the root cause.
I have the following code slightly modified from the Visual Studio 2010 css template. My problem is I'm getting extra top padding/margin of approx 10px in the parent div's of the menu controls in chrome only. It's fine in IE. Whats going on here?
CSS
/* CSS RESET
----------------------------------------------------------*/
*{margin:0;padding:0;}
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
/*font-variant: small-caps;*/
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
min-height: 420px;
}
.mainContent
{
float:left;
width:790px;
padding-left:8px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
}
div.topMenuContainer
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 0px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
margin:0px;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
margin:0px;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
margin:0px;
}
/* LEFT MENU
----------------------------------------------------------*/
div.leftMenuContainer
{
background-color:#3a4f63;
width:160px;
float:left;
min-height: 420px;
}
div.leftMenu
{
padding: 4px 0px 4px 8px;
}
div.leftMenu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.leftMenu ul li a, div.leftMenu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.leftMenu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.leftMenu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
ASPX
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MTGames.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My Site
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear topMenuContainer hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
<asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
<asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
<asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<div class="clear leftMenuContainer hideSkiplink">
<asp:Menu ID="LeftNavMenu" runat="server" CssClass="leftMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
<asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
<asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
<asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
</Items>
</asp:Menu>
</div>
<div class="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
HTML Output as requested...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
MT Games LTD - Home
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkLDnBf84MIbFVqD400rg+QLHpOjYA01q5saPk2YvtQR8=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=e5ggu92Xslxua3kL9nz8UEofZFOqESloGE_Cj0acdYupGWiZv6mA-7j9gl1qZyu-Y2_dOyT682uBRYryo2Uk1qSiI78I-2pgTagWwnubNEw1&t=634220066968172593" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=vohUtv47l55JX-_SEfdvXX1rc3wSNSZ9IvoYKmaPF-0UDpWX_2VTYUNkLm7PO0jeF56__8cFVok93Md1-jOV27X9JbBIl3KWaifSkCmwKvk3Dgj6N7xFweVjQK5drnmfItGQ0AEWh8sbhd1vBIHoeA2&t=6df0ad7a" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=r99416_-lUTvcLqe0vx1emg4MR_VAgLHwDco9wPW98QgH03QnH7DRQkA0mx2FQZ5VppBb7JYwOM3gTOTGs8r_j6W0xaQKJo8xTEbbaYeAM9WE90s6Tp-uohjL07JySbKxyIzs5kMm3DtV3kkrbMsJmAIQGWT7gReSVSkk-vQtlSm8AGzdfW36I9zdQwR-z_60&t=2610f696" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=otDNNytXiqv-illCGIud3TULs9-clnOJc4rCdck1L_NgOC9rQIuScBEulatBNXXmu3mRYEY-IBlraYglBRImGj3VFqJMq5q1D8augYHxad15XoOHRiy4KA8ZCRoOmHQsaZmo-EGDbQ833sK4G1QpyLm1dIkybv0r0OSMKV_PkG29XB8AWUm5gsLlNrC2G67K0&t=2610f696" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScrptManager', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="page">
<div class="header">
<div class="title">
<h1>
MT Games LTD
</h1>
</div>
<div class="loginDisplay">
[ Log In ]
</div>
<div class="clear topMenuContainer hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Content/SavingsClub.aspx">Savings Club</a></li><li><a class="level1" href="Content/BuySellExchange.aspx">Buy Sell Exchange</a></li><li><a class="level1" href="Content/Photos.aspx">Photos</a></li><li><a class="level1" href="Content/ContactUs.aspx">Contact Us</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<div class="clear leftMenuContainer hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" width="0" height="0" style="border-width:0px;" /><div class="leftMenu" id="LeftNavMenu">
<ul class="level1">
<li><a class="level1" href="Content/Consoles.aspx">Consoles, Games & Accessories</a></li><li><a class="level1" href="Content/DVDBRMusic.aspx">DVD, BLUERAY & Music</a></li><li><a class="level1" href="Content/Collectables.aspx">Collectables & Figurines</a></li><li><a class="level1" href="Content/Guns.aspx">Guns</a></li><li><a class="level1" href="Content/Knives.aspx">Knives</a></li><li><a class="level1" href="Content/Archery.aspx">Archery</a></li><li><a class="level1" href="Content/Other.aspx">Other Products</a></li>
</ul>
</div><a id="LeftNavMenu_SkipLink"></a>
</div>
<div class="mainContent">
<p>
To learn more about ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script><script type='text/javascript'>new Sys.WebForms.Menu({ element: 'LeftNavMenu', disappearAfter: 500, orientation: 'vertical', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
Now on jsfiddle http://jsfiddle.net/hhdTe/1/ although the format is a but screwed up on there - the problem still exists. Run it in IE & Chrome and you'll see the extra padding above the menus
Set SkipLinkText="" in the menu.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
The padding will vanish.
Both Safari and Chrome have a problem with this. It's accessibility feature in the Menu Control.
If you interested in more information:
http://sim4all.com/blogging/?p=47
Just a follow-up on this. using the above methods to fix this issue is not recommended. There is a very good reason for that image being there. It is an accessibility feature to allow people with screen readers to skip navigation menus and move directly to the content.
See explanation here: http://webaim.org/techniques/skipnav/
Using display: none; hides the link from screen readers as well as visual users, rendering it useless. Changing the link text will mean that people that are looking for it will not be able to find it.
The recommended approach is to leave the image visible, yet move it off the screen. That way it cannot be seen, but screen readers will still find it. Add the below CSS to acheive this:
img[alt='Skip Navigation Links'] {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
That will fix the issue, without affecting accessibility.
It's the image inside the 'skip links', not sure why you need it. Try this in your CSS:
img[alt='Skip Navigation Links'] {
display: none;
}