It should look like this - working on IE
but it is't showing like the above on Google Chrome:
Let me paste the codes I've been using :
Structure :
.header
|_ .h-box-style & .h-box-1
|_.ad-title
|_.ad-content
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>OrderBorder.com -- The way you want the deals for Apple mobile phones </title>
<link href="styles/main.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/cufon-yui.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="h-box-1 h-box-style">
<span class="ad-title">Enjoy Group Savings</span>
<div class="ad-content">
Wholesale prices for your Apple gear get lower with larger group size.
</div>
</div>
<div class="h-box-2 h-box-style">
<span class="ad-title">Earn Points</span>
<div class="ad-content">
Keep earning points with every purchase you and your friends make.
</div>
</div>
<div class="h-box-3 h-box-style">
<span class="ad-title">Reach Borderline Prices</span>
<div class="ad-content">
Eat my dust group!!! Use your points to bring your own prices to the border.
</div>
</div>
</div>
</div>
</body>
</html>
and CSS Code:
body
{
margin:0px;
background-image:url(../images/background.jpg);
}
div.main
{
background-image:url(../images/main_background.jpg);
background-repeat:no-repeat;
height:950px;
width:897px;
margin-right:auto;
margin-left:auto;
}
div.main div.header
{
width:893px;
height:120px;
margin-top:120px;
float:left;
}
div.main div.header div.h-box-style
{
width:100%;
height:100%;
}
div.main div.header div.h-box-style span.ad-title
{
color:Black;
font-family:Arial;
font-size:20px;
width:100%;
background-color:Red;
}
div.main div.header div.h-box-style div.ad-content
{
color:Gray;
font-family:Arial;
font-size:12px;
width:100%;
height:40px;
}
div.main div.header div.h-box-1
{
float:left;
width:220px;
height:80px;
margin-left:80px;
margin-top:20px;
}
div.main div.header div.h-box-2
{
float:left;
width:220px;
height:80px;
margin-left:70px;
margin-top:20px;
}
div.main div.header div.h-box-3
{
float:left;
width:250px;
height:80px;
margin-left:30px;
margin-top:20px;
}
When I inspect source code with Google Chrome developer tool, I can see that css is applied to the .ad-title and ad-content but these codes don't change anything.
So I've pasted everything I've done. can some one help me why Google Chrome behaves like that and doesn't show the text on the page under `.header'.
Thanks in advance.
I'm running Chrome v. 8.0.552.224 and the text is displayed correctly... the problem is not in your html code...
I've found the problem. ad-title and ad-content are somehow matching some other internal css rules which don't belong to my application. When I change the names to h-title and h-content they started working fine.
Especially be careful, when you are using AdBlock extension since they don't like ad word.
Related
I have an external CSS file name main.css. The ID of nav and footer are working fine but the ID of header doesn't work. When I put the header part in HTML file, it works.
Why does it not work in CSS file.
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="UTF-8">
</head>
<body>
<div id="header">
<h1>Furkan İlhan</h1>
</div>
<div id="nav">
Hakkında<br>
Kariyer<br>
</div>
<div id="footer">
Tüm Hakkı Saklıdır. Furkanilhan.com
</div>
</body>
</html>
CSS File:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
The image of result
Because You Use class="header" Property And External CSS Defined ID # Header.
So You Change
#header {
}
Use This Code In CSS
.header {
}
Work 100% Perfectly
Dhaval is wrong - You had it right with the #header since you have it as an id in your HTML.
remove the <style></style> tags from your CSS sheet.
Let me know how you go
Regards,
Kostantinos
It seems the links require id to be defined in each <div></div> to work, not just the class name.
My case was a bit different, where the links didn't work with just class defined in html and .clasname defined in css file.
I am facing some issue in printing a form created using absolute positioning in FF. I am printing on A4 sheet. The page comes fine if its single paged form, but when i have to print multi page form the only first page is printed and other elements that have to come on second page overwrites each other in a single line on the next page. Its quite weird the same is working fine on IE
NOTE I am unable to share the html as it includes a lot of css and quite complex and big HTML pages.
<!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">
<head>
<style type="text/css">
#-moz-document url-prefix() {div{position:relative} }
#media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There is a thread where the topic was already discussed:
Firefox printing only 1st page
However, the problem could be in the css.
As explained here http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/
If you have an
overflow: hidden;
in your css, change it to
overflow:visible;
and then it should work.
If it is possible, set the height of the div elements. This will at least force visibility onto two pages. However, it does not deal with overlapping divs, and there still may a problem of visibility of the div content.
Here is my revision (some visibility borders and coloring was added, and the width may or may not prove useful):
<!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">
<head>
<style type="text/css">
#-moz-document url-prefix() {
div{
position:relative;
background-color: #dddddd;
border: 1px solid #999999;
width: 20%;
}
}
#media print {
marquee {
-moz-binding: none;
}
body{
overflow:visible !important;
}
}
#a{
position:absolute;
top:50px;
left:70px;
height: 1000px;
}
#b{
position:absolute;
top:1050px;
left:170px;
height: 600px;
}
#c{
position:absolute;
top:1550px;
left:470px;
height: 500px;
}
#d{
position:absolute;
top:1650px;
left:270px;
height: 100px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There's a long standing issue with Firefox and printing absolute positioned elements as mentioned by Daniele B.
Can you redo the HTML+CSS to use relative positioning?
In the CSS add some page-break stuff (http://davidwalsh.name/css-page-breaks). That should make it easier to style the block elements so they flow in each 'page' and align things correctly when #media print.
change your position:absolute to position:relative. you can target firefox only in your print stylesheet using: #-moz-document url-prefix() {div{position:relative} }
<!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">
<head>
<style type="text/css">
#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue;
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red;
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple;
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green;
}
</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>
What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029
Below is a simplified code snippet that shows my problem.
I have a box with 3 pieces of information and they should be lined out correctly, but apparently in FireFox 4 the information is lined out lower that should be. Where does this difference come from and how should I solve this? Am I using the wrong methods for displaying the info perhaps?
I put red borders around the divs so you can visualize it better.
You can see it here: http://www.sharpsignal.com/test.html
EDIT: To clarify: in FF4 the bottom red box aligns with the boxwrap box, in other browsers there is still space between the 2, why does FF4 render this different and how can I fix it so its the same in all browsers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.boxwrap{
border: 1px solid #666;
width:120px;
height:54px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#444;
}
.boxcontenttop{
position:relative;
left:10px;
top:4px;
font-size:9px;
text-align:left;
border:1px solid #DD0000;
}
.boxcontentmain{
position:relative;
right:10px;
top:5px;
text-align:right;
font-size:13px;
font-weight:bold;
border:1px solid #DD0000;
}
.boxcontentextra{
margin-top: 7px;
text-align: center;
color:#888;
font-size:10px;
border:1px solid #DD0000;
}
</style>
</head>
<body>
<div class="boxwrap">
<div class="boxcontenttop">top info</div>
<div class="boxcontentmain">Main content</div>
<div class="boxcontentextra">Extra Info</div>
</div>
</body>
</html>
Using left and right is causing them to shift in the boxes.
Live demo with red boxes aligned.
If you want vertical alignment, you'll need to position the values evenly based on the offset from the top. Live demo
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
Here is the code:
<!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="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
Best Regards,
UPDATE:
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
Best Regards,
You'll have to set the height of the iframe to match the height of the page you are looking at.
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
If you want to get rid of the scrollbar on the main window, add an overflow style:
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
You can do this with javascript:
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length:
resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
A very simple example can be found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
I have just started making web pages and I'm having lots of trouble with this very simple web page. I can't make anything appear on IE but it works fine on everyother browser. I'll take the liberty of putting all the code in my question because it is really short. If anyone could help me it would be great!
The html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Rhaya<title>
<link rel='stylesheet' media="screen" type="text/css"
href='rhaya.css'/>
</head>
<body>
<div id="masthead"> Rhaya </div>
<div id="content"> Aca va todo el
contenido </div>
<div id="footer"> ©2009 Rhaya | Teresa
Siu | Pía Fabry </div>
</body>
</html>
and the css is:
ul,ol,li {list-style:none}
body { margin:0 auto; padding:0;font-family: Tahoma;font-size:13px; background: #fff; line-height:15px; color:#000;}
a {color: #000;text-decoration:none}
a:hover {text-decoration:none;color:#000;cursos:default;}
/* Masthead */
#masthead {
margin:10px 0 10px 0;
height: 50px;
font-weight: bold;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
background-image: url(img/header.png);
}
/* Content */
#content {
margin-left:0px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
min-width: 300px;
min-height: 300px;
font-family: Tahoma;
font-size:13px;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
text-align:center;
}
#wrapper{
width:1002px;
clear:both;
height:auto;
margin:0px auto;
background:#fff;
}
I'm really sorry for asking so blatantly but I really am stumped.
Thanks!
For future reference: http://validator.w3.org/#validate_by_input
Use it for resolving html issues.
You have a mistake in your html head:
<title>Rhaya<title>
should be
<title>Rhaya</title>
Wow, it actually didn't show up at all in IE.
The reason is that you have the entire page in the title of the page. Change this:
<title>Rhaya<title>
to:
<title>Rhaya</title>
I suggest adding the following to you css:
div { position: relative; }
<html
tag isn't closed properly
title tag isn't closed properly.
I have tried and tested. it is your title problem. enclosed it title /title will definitely work.