This is how my website looks in Google Chrome and nearly all browsers except some versions of IE.
This is how it looks in IE8, IE9 and probably in IE6.
The funny thing is that the website looks ABSOLUTELY ok in IE7. I want you to help me solve the problem, but I don't really know which data to server you, but if you ask, I can provide everything you need.
Here's the header code:
<div id="header">
<div id="headercont">
<div id="headerlogo">
<img src="<?php echo dir;?>css/images/headerbg.png" class="header" />
</div>
<div id="menu">
<div id="mpointshighlight">
<div id="menupoints">
<?php echo menuSpace; ?>
<div id="menumain">Main</div>
<?php echo menuSpace; ?>
<div id="menuabout">About</div>
<?php echo menuSpace; ?>
<div id="menublog">Blog</div>
<?php echo menuSpace; ?>
<div id="menuphotos">Photos</div>
<?php echo menuSpace; ?>
<div id="menuvideos">Videos</div>
<?php echo menuSpace; ?>
<div id="menumusic">Music</div>
<?php echo menuSpace; ?>
<div id="menuprojects">Projects</div>
</div>
</div>
</div>
</div>
</div>
Here's the header CSS:
#header {
background-color:#00a2ff;
background-image:url('images/menubg.png');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
min-width:1100px;
height:243px;
}
#headercont {
margin:auto;
width:1100px;
}
#headerlogo {
margin:auto;
width:1000px;
}
#menu {
width:100%;
height:44px;
}
#menupoints {
position:relative;
width:1000px;
font-size:24px;
font-family:verdana;
height:44px;
}
#mpointshighlight {
margin:auto;
width:1000px;
margin-bottom:10px;
background-repeat:no-repeat;
}
#menupoints a:link {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px;
}
#menupoints a:visited {
color:white;
text-decoration:none;
text-shadow: gray 2px 2px 3px;
}
#menupoints a:hover {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px, white 0 0 1em;
}
#menupoints a:active {
}
#menumain {
display:inline
}
#menuabout {
display:inline
}
#menublog {
display:inline
}
#menuphotos {
display:inline
}
#menuvideos {
display:inline
}
#menumusic {
display:inline
}
#menuprojects {
display:inline
}
Hard to be certain what the problem is without going into depth, but something that might help is to look into compatibility modes in IE:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Specifically, tell IE8 and higher to emulate IE7:
Ensure this is the first HTML tag in the head.
As for IE6, depending on your target audience, you might be able to get away with ignoring it, otherwise it's a trawl through CSS I'm afraid!
Related
I am self-taught in HTML and CSS, but one problem I have recently been running into is modifying links with CSS. I have done it in the past before, many times with no error, but now all the ways I can think of and that I find on the internet do nothing.
I have tried all of these ways, and none worked:
a.linkclass:link{text-decoration:none;}
.linkclass a:link{text-decoration:none;}
#linkid a:link{text-decoration:none;}
a#linkid:link{text-decoration:none;}
{note, these were not done all at the same time, just examples}
My HTML and CSS are as follows(after looking over and over, I could find nothing wrong that could cause these problems)
body{
margin:0;
background-color:eaf7ff;
}
#menubar{
max-height:10%;
min-height:3%
height:5%;
background-color:BBBBBB;
border-bottom:1px solid black;
max-width:100%;
min-width:100%;
width:100%;
float:left;
position:fixed;
display:inline-block
}
#pushbox{
max-height:10%;
height:10%;
background-color:black;
max-width:100%;
min-width:100%;
width:100%;
}
#box1{
background-color:eaf7ff;
}
#tag1{
background-color:eaf7ff;
margin:0;
}
#box2{
background-color:fff7ea;
}
#tag2{
background-color:eaf7ff;
margin:0;
}
#box3{
background-color:eaf7ff;
}
#tag3{
background-color:eaf7ff;
}
#box4{
background-color:fff7ea;
}
#tag4{
background-color:eaf7ff;
}
#box5{
background-color:eaf7ff;
}
#tag5{
background-color:eaf7ff;
}
#copyright{
}
.content{
max-width:100%;
min-width:100%;
width:100%;
min-height:80%;
height:85%;
}
.contenttag{
max-height:10%;
height:10%;
max-width:100%;
min-width:100%;
width:100%;
}
a.menulink{
border:1px solid black;
background-color:red;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: none;
color:black;
}
a:active {
text-decoration: none;
color:black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- ==========MENUBAR==========-->
<div id='menubar'>
<h1>
<a href='#tag1' class='menulink'>OPT1</a>
<a href='#tag2' class='menulink'>OPT2</a>
<a href='#tag3' class='menulink'>OPT3</a>
<a href='#tag4' class='menulink'>OPT4</a>
<a href='#tag5' class='menulink'>OPT5</a>
</h1>
</div>
<!-- ==========CONTENTBOX1==========-->
<div id='tag1' class='contenttag'></div>
<div id='box1' class='content'>
<h1>ContentBox1</h1>
</div>
<!-- ==========CONTENTBOX2==========-->
<div id='tag2' class='contenttag'></div>
<div id='box2' class='content'>
<h1>ContentBox2</h1>
</div>
<!-- ==========CONTENTBOX3==========-->
<div id='tag3' class='contenttag'></div>
<div id='box3' class='content'>
<h1>ContentBox3</h1>
</div>
<!-- ==========CONTENTBOX4==========-->
<div id='tag4' class='contenttag'></div>
<div id='box4' class='content'>
<h1>ContentBox4</h1>
</div>
<!-- ==========CONTENTBOX5==========-->
<div id='tag5' class='contenttag'></div>
<div id='box5' class='content'>
<h1>ContentBox5</h1>
</div>
<!-- ==========COPYRIGHT==========-->
<div id='copyright'><center>
copyright © Vladimir Plenskiy <?php echo date("Y"); ?>, Template by Timothy Leitzke
</center>
</div>
</body>
</html>
The 'a.menulink' by itself did not work. (Sorry if this is confusing, it is currently 12:14 AM and I have also been working on a project in Unity and some art on my computer for the past 24+ hours)
--edit--
for those who do not understand what my problem is, even though the format is right. The CSS styling using classes and ids does not work(the examples that I tried are all at the first CSS stylesheet. that style sheet is not one used on the page, as seen in the header, only ONE is used)
According your HTML proper CSS for your links should be:
.menulink:link {text-decoration:none;}
Ok, I have a list of links in my top menu of my website that each of them is inside a class div. I want to set the border of the active link(current page) to none; but I seem to have some problems in the code!
the top menu links
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
my CSS:
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
what you want to achieve, can be done this way.
create a separate class .active
.active
{
border:none;
}
and apply it to the anchor that you clicked, through jQuery/javascript ( and remove from the previous one):
see fiddle
You need Jquery to solve this problem, use some class for active link and use jquery for remove the active class this is one method example is following
Script
$('.emp_details_link a').on('click',function(){
$('div').removeClass('active');
$(this).parent().addClass('active');
});
PHP
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
css
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
.active
{
border:none;
}
and another method with out using jquery, is directly use the class in appropriate page, like I assume now contact is active page
css
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
.active
{
border:none;
}
php
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link active"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
Use a class for the current page instead.
:active will only work when you click the link - so that the link is now active..
you can use border:none; .it will solve your problem
There is currently no way to select the parent of an element in CSS.
give border to a so that it can remove its own styling
.emp_details_link{
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
border:1px solid #000000;
}
.emp_details_link a:active{
border:1px solid red;
border-bottom:none;
// something like this
}
or make a separate class for this and add it to that element with JS
Give main border to a tag instead of div
.emp_details_link{
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none; border:1px solid #000000; display:block
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
DEMO
if you have including the link file to all the page follow like this
general
<?php
$general='active';
include('link.php');
?>
contact
<?php
$contact='active';
include('link.php');
?>
link
<div class="emp_details_link <?php if(isset($general)) echo $general;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link <?php if(isset($contact)) echo $contact;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link <?php if(isset($Relations)) echo $Relations;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link <?php if(isset($Work)) echo $Work;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
I have the following css:
.horizontal-holder1{
float:left;
width:88px;
height:98px;
margin-bottom:15px;
border:1px solid #bdbdbd;
background-color:grey;
}
.white-holder{
width:88px;
height:49px;
background-color:white;
float:left;
.yellow-holder{
width:88px;
height:49px;
background-color:#FFF8DC;
float:left;
}
.player-holder{
width:60px;
height:49px;
float:left;
}
.score-holder{
width:28px;
height:49px;
float:left;
}
And the following html:
<div class="horizontal-holder1">
<div class="white-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
<div>
</div>
<div class="yellow-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
<div>
</div>
</div>
The problem is that the yellow holder doesn't float below the white holder, it goes to the right.
Can anyone see a reason for this?
Thanks
possible issue with the syntax on "score-holder"
<div class="score-holder">
0
<div>
the closing <div> tag has no end-tag slash (/)
looks okay once the end-tags are fixed: jsfiddle example
Properly close the .score-holder
It's a good practise to name your classes by their purpose not appearance (.yellow-holder .second-team-holder).
Why do you put float:left everywhere?
Add } after .yellow-holder CSS definition
You're missing a / in some of your closing tags, and a } in your CSS.
<div class="horizontal-holder1">
<div class="white-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
</div> <!-- here -->
</div>
<div class="yellow-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
</div> <!-- and here! -->
</div>
</div>
.horizontal-holder1{
float:left;
width:88px;
height:98px;
margin-bottom:15px;
border:1px solid #bdbdbd;
background-color:grey;
}
.white-holder{
width:88px;
height:49px;
background-color:white;
float:left;
} /* whoops! */
.yellow-holder{
width:88px;
height:49px;
background-color:#FFF8DC;
float:left;
}
.player-holder{
width:60px;
height:49px;
float:left;
}
.score-holder{
width:28px;
height:49px;
float:left;
}
All fixed: http://cssdesk.com/LT5tL
Need help to solve some resolution issues on a project i'm currently working on.
Have a look here http://viewlike.us/?url=tinyurl.com%2Fsoreso&button.x=75&button.y=17&button=Submit
The css/layout was done as a liquid layout but as you can notice the columnns and the search box on the right start overlapping from 800*600 onwards.
At higher resolutions say 1920*1200 it starts looking a bit ugly particularly the search box on the right looks a bit stretched.
The site looks ok only when viewed at 1200*800 or at the next resolution.
What can i do to both
1)Make it work for 800*600 and above
2)Prevent it from looking ugly at higher resolutions
I'm also thinking about adding a media queries specific style sheet to make this work for smartphones, tablets etc.
Here's both the page and the css for it
index.php
<html>
<body>
<div id="wrap">
<div id="header">
<?php include("header.inc.php"); ?>
<div id="menu" align="left">
<div class="top_menu_left">
<li><?php echo $lang['HOME_LINK']; ?></li><li>|</li>
<li>Subscribe</li>
</div>
<?php if($auth->id) { ?>
<div class="top_menu_right">
<li>My Account</li><li>|</li>
<li>Watch List</li><li>|</li>
<li>Logout</li>
<?php }else{ ?>
<li>Login</li><li>|</li>
<li>Sign up</li>
</div>
<?php } ?>
</div>
</div>
<!--END OF MENU DIV CONTENT-->
<div align="center"><div id="bar"></div></div><br />
</div>
<div id="content">
<div id="left_content"> <?php include('left_sidebar.php'); ?> </div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
"#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
<?php
if($xview != "post" && $xview != "postimg")
{
?>
<div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>
<?php
}
?>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
<div id="footer" align="center">
<div class="footer_menu">
<li>About us</li> <li>|</li>
<li><?php echo $lang['TERMS_OF_USE']; ?></li><li>|</li>
<li><?php echo $lang['PRIVACY_POLICY']; ?> </li><li>|</li>
<li>Contact us</li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> <?php echo $site_name; ?>. All Rights Reserved </strong>
</div>
</div>
</div>
</body>
</html>
Style.css
html { -webkit-text-size-adjust: 70%; }
body { margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}
#header {
padding: 10px;
height:251px;
}
#menu { width:100%; height:2.2em; margin-top:1%; background:#80b2e4; border- radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
.top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
.top_menu_left li a { color:#fff !important; }
.top_menu_left li a:hover { color:#336699 !important; }
.top_menu_right {float:right; width:17%;;height:1.2em;}
li{list-style:none; float:left; color:#74677E;font-size:70%;font- weight:bold;font- family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px; -top:9px; color:#fff;}
.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}
#searchbar { width:100%; height:auto;margin-top:8%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:87%; height:auto; margin-left:11%; margin-top:0; }
#left_content { width:7%; height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding- left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; height:auto;float:left; }
.main_content_header {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}
.content_header {width:70%; height:auto; margin-left:3%;}
/*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px; }*/
.left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background- repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat- y;float:left; }
.left_content_middle {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}
.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;height:auto;background-color:white;float:left;margin- left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border- radius:10px; -moz-border-radius:10px}
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {height:40px;width:100%;margin:auto;text-align:center;text- align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x; line-height:40px; color:white;}
.footer_menu {
color: white;
float: right;
height: 1.2em;
-left: 3%;
width: 70%;
}
.footer_menu li {
color: white;
padding-right: 1%;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu2 {
background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
color: grey;
float: left;
font-size: 13px;
margin-top: 21px;
width: 100%;
}
.footer_menu strong { font-weight:lighter; color:#666}
Give max-width and min-width a try.
I'm guessing by liquid layouts you're using some form of percentages for it. In which case after a certain size the columns etc will be getting too large.
You will also most likely want to try min-width to stop the columns overlapping each other. You can prevent the text from going into the other columns by using overflow:hidden, however you would probably be better off just making the column have a minimum width and making the font-size smaller.
http://reference.sitepoint.com/css/max-width
http://reference.sitepoint.com/css/min-width
I am just facing a problem,can not able to overcome(make be lack of proper identification of problem).The header of a web template is working well in 1280*800 but breaking in larger resolution monitors(1900*1440). The Header contains total three divs as bellows:
<div id="header">
<!--#LOGO#-->
<div id="logo">
<img src="<?php echo SITE_IMG?>shop-logo.png" alt="<?php echo SITE_NAME;?>">
</div>
<!--#HEADER NAVIGATION#-->
<div id="welcomeimg">
<img src="<?php echo SITE_IMG?>shop-willkommen.png" alt="">
</div>
</div> <!-- end header-->
And the css of the templates as follows:
#header {padding-bottom:0px; margin-bottom:0; background-color:#CCCCCC;background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
}
The to div "logo" and "welconeimg" just breaking and getting out of the middle of the header(wraper).
It will be helpful for me,if ant one can solve the problem.
Thanks in advance.
Do you have a link you can show? I tried this, basically your example with the 3 divs having a special background color, that way you can see where they are going.
#header {
padding-bottom:0px;
margin-bottom:0;
#background-color:#CCCCCC;
background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;
background-color: red;
}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
background-color:green;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
background-color: yellow;
}
">shop-logo.png" alt="">
shop-willkommen.png" alt="">