We are in the process of redoing our whole website. The current website is over 7 years old, but seems to have a CSS bug that only appears in Webkit-based browsers (Chrome and Safari). We would like to fix that bug as it may take a while before the new site is ready.
We have a table with fixed width:
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td class="left" width="200" valign="top">
Contents of the menu here.
</td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Contents of website here.
</table>
</td>
</tr>
</table>
The CSS of the relevant elements and classes is as follows:
td {
font-size: 11px;
}
td.left {
width: 200px;
padding-top: 50px;
background-color: #EFEFEF;
}
td.top {
height: 16px;
align: right;
padding-bottom: 2px;
}
The issue is that Webkit calculates the td with class left to be 161 pixels instead of 200 pixels. I can resolve this issue by adding either style="display: block" or style="min-width: 200", but when I do that, Webkit resizes the first table to 1039 pixels rather than 1000, causing the rest of the page to shift all over the place. It seems to totally ignore the fixed width requirements.
I would like to know if there is a way to fix this without drastically changing the structure of the website. If you need to, you can play around with the CSS on the website in question. Note that the bug only appears in Chrome and Safari. I have checked many bug reports for Webkit and many Stack Overflow questions, but none of them seem to quite match my problem.
I think the problem are the images in the righthand "sponsoren" table.
Setting min-width to the left table, and width:150px to the div-tag in the "sponsoren"-table, is working for me.
Wow, don't use tables on such elementary script, go with divs:
<div style="width:1000px; background-color:#ffffff; float:left; clear: both;">
<div style="width:200px; float:left;">
Contents of the menu here.
</div>
<div style="width:800px; float:right;">
Contents of website here.
</div>
</div>
This should fix your problems.
Try to add class class to your table and :
table.yourclass {
width: 1000px !important;
}
Related
I have a container to center my web page using css:
#container{
width: 1000px;
height: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
This perfectly displays the left and right borders from the top of the page to the bottom of the page, no problem.
However I have some HTML that is only displayed by PHP when the relevant $_GET is present, for example:
<body>
<div id="container">
<?php if($_GET['something'] == "something"){ ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
<?php } ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
</div><!--container end-->
</body>
When this html is displayed it pushes the content below it down as it should, however the left and right borders end part way up the page at the point where it would end should the html displayed by the PHP not be there.
Does anybody know why this is happening and if possible point me in a direction to get the border to continue down to the bottom of the page?
I have googled and googled but cant seem to find what I need.
Many Thanks
Fixed it, changed height:100% to min-height:100% in the CSS.
Its amazing how you spend hours searching then as soon as you post a question you find the solution. Nvm its here for others to see should they need it :)
So basically i have two php files, one with all the functions etc. and one with mixed php and html code.
<table>
<?php echo read(); ?> //This prints a full table with <tbody> etc.
</table>
My question: How do I access this PHP printed html code from my CSS style sheet? It
s a seperate file and i have linked it correctly etc. (since it styles all the html code on the same file)
I have tried just putting
tbody { width:100px; padding: 20px;}
and all those normal ones, but for som reason it doesn't apply to the code the PHP prints out.
Suggestions? (new to PHP, be nice)
Add a class to the <table> tag like
<table class="my-table"> and then try to add in your css file
.my-table{
width:100px;
}
You should apply the css styles to the table tag.
So if anyone stumbles on this thread with the same problem, I managed to solve it by putting all the CSS info in the <table> tag like this:
<table
style="
width:480px;
margin-left:10px;
font-family: calibri;
background-color:white;
color:black;
padding:5px;
border:1px solid black;
"
>
I am trying to put together a little contact form for my 3 year old son who has leukemia. I want to use it so people can send him notes of encouragement, and we can print them out and hang them in his room. I've got the form working and posting the data using DOMpdf. My issue is, the background image I am trying to use as the "stationary", refuses to scale out to 100% and regardless of what size I make it in my graphic software, it is not working. Any help is appreciated on what I am missing. Code below. For example, see: http://bebrave.me/#contact
<head>
<style>
body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat;
background-size: 100%;
margin-top:300px;
width:612px;
height:792px;
}
</style>
</head>
<body>
<table width="500px" border="0" align="center" cellpadding="0" cellspacing="0" id="Table">
<tr>
<td align="left">Dear Joshua,<br />
<?php echo $post->Message; ?></td>
</tr>
<tr>
<td align="right">Be Brave!<br />
-<?php echo $post->Name; ?></td></tr>
</table>
</body>
A few notes, these apply if you're using dompdf 0.6.0 beta 3 or the latest from github:
the background-size property is not yet supported in dompdf
you're adding a margin to the body, so the content of the body (including any background image) will be start after the margin is applied
dompdf applies a default page margin of 1.2cm
the default DPI in later versions of dompdf is 96. It's probably a bit easier to get a handle on the dimensions and placement if you drop that back to 72 so that it matches the PDF standard. If you use any other DPI dompdf will perform translation during the render.
dompdf does appear to diverge from modern browsers in regards to the application of the background image. This is probably something the dev team will want to look at in the future. However, since you're targeting dompdf you'll have to take into account its quirks.
Here's a re-written document that appears to do what you want. It's targeting the latest code available on github which I recommend you use considering the many improvements it includes. If you need to target a different release let me know and I can tweak the HTML.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>
<style>
#page { margin: 0in; }
body {
font-family: Denk One, sans-serif;
background-image: url(http://www.bebrave.me/test.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
p {
width: 400px;
margin: auto;
}
.signature {
margin-top: 4em;
text-align: right;
}
</style>
</head>
<body>
<p>
Dear Joshua,<br />
You may not understand all that's happening. Sometimes, you may not even care.
Maybe you just want to do what you have to do to get better so you can
go back to being a three-year-old ... growing, learning, playing, loving.
It may be hard to understand, but you are a hero to your family and friends. You
are a hero to them because you show strength in the face of something so
scary. Stay strong, be happy, and and get better.
</p>
<p class="signature">
Be Brave!<br />
-BrianS
</p>
</body>
</html>
The resolution of your image should be 96 pixels per inch (PPI).
For example:
Format A4: Resolution 96ppi and 210mm x 297mm or 297mm x 210mm (horizontal or vertical, respectively)
HI I installed http://css-tricks.com/examples/AnythingSlider/#panel-4 and it works perfect.
But I cannot link a particular slide to a website. I tried the below code but for nothing..
Can someone offer an alternative?
<li style="width: 650px; height: 270px; class="panel">
<a href="'.$slide['link'].'">
<img alt="'.$slide['alt'].'" src="images/home_slideshow/'.$slide['img'].'"
style="width: 100%; height: 100%;">
</a>
</li>
The html/php parses good in the browser... so thats not the issue..
Does this support links ?
You're not closing the style attribute.
<li style="width: 650px; height: 270px; class="panel">
should be:
<li style="width: 650px; height: 270px;" class="panel">
Whilst it may parse well in the browser, if the plugin you are using is looking for a "panel" class for an event then it wouldn't find it.
Also if this is in html and not being generated by php then you need <?=$variable?> rather than '.$variable.' as you've been using
I've been trying many techniques.. but none helped.
I tried "margin-bottom: 1em", "bottom: 2em", etc. but the element stays nearly invisible.
See the bottom of the page.. there is a sentence, which is used to be shown..
Here's the URI: http://Sulayman.org/
Can anyone help me? - Thanks!
Sure, increase the margin on the h1. You'll probably want to remove your inline styles and move them into classes and ID's.
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 0.5em;" class="title">
into
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 2.5em;" class="title">
"The Pixel Developer" is correct; you need to change the value of margin-bottom to 2.5em to move the footer farther down. I'm not sure why you are using inline styles instead of putting them in your stylesheet, but that is irrelevant to the problem. I changed your code in my browser and it works as you requested.