I have this site
http://beautyworldinternet.co.il/
look in the menu and you can see that its have 2 row
I need it be 1 row
how can I do it?
In your style.css file change the padding from this
#main-navigation .menu li a {
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #383838;
padding: 11px 24px 0 24px;
margin: 0 0;
min-height: 27px;
top: 0;
display: block;
border-right: 1px solid #E1E1E1;
text-align: center;
text-shadow: 0 1px 1px white;
}
to this
#main-navigation .menu li a {
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #383838;
padding: 11px 13px 0 13px;
margin: 0 0;
min-height: 27px;
top: 0;
display: block;
border-right: 1px solid #E1E1E1;
text-align: center;
text-shadow: 0 1px 1px white;
}
Related
I have a problem with mapping together table and form. In my table I have some values that with help of a form I want to redirect to a page.I have read that I cannot put a form into a table so I tried not to. But if I let
<form>
<table>
structure, my display on page isn't very nice and I am not responsabile with frontend part but anyway I want to not be problems with it.If I let the table, without the form the display is ok(like in image). An image in left page and the table with the information in the right part. When using form, the table goes down and it's not good. So how to do? I try to include an image here to see how my page looks like without the form, but I really need to use the form. Any suggestion how to resolve this?I mean it's possible to have the display like in the photo but plus using a form and to not change the display?
EDIT: the css where tables are displayed
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
table th {
padding-right: 40px;
}
html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;}
.wrapper {width: 980px; margin: 0 auto;}
#content {padding: 20px 0 80px;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ef8887; border-bottom: 3px solid #db7a78;}
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;}
.header .branding-title a {display: block; height: 125px; width: 225px;}
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 100px;
text-align: left;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.header .nav li.on a {text-decoration:underline;}
.header .nav li a:hover, .header .nav li a:active {opacity: 0.7;}
.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
#content {min-height: 400px; background: white;}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
}
.section.page .media-details h1 {
text-align: left;
}
.section.page p {width: 475px; margin-left: auto; margin-right: auto; }
.section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.catalog {padding-bottom: 42px;}
.section.catalog h2 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
padding-top: 20px;
}
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.catalog ul.items li {
display: inline-block;
list-style: none;
width: 204px;
text-align: center;
padding: 14px;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
.section.catalog ul.items li a:hover:after {
content: '+';
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top;
}
.section.catalog ul.items li a {
background: white;
display: block;
padding: 30px 0 10px;
text-decoration: none;
}
.details-button {
color: #888;
}
.section.catalog ul.items li a:hover {
opacity: 1;
color: #666;
}
.section.catalog ul.items li img {
width: 190px;
border: 6px solid #f0eeed;
}
.section.catalog ul.items li p {
margin-left: 0;
margin-right: 0;
width: auto;
}
.media-picture {
float: left;
width: 400px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 14px;
background: #f0eeed;
}
.media-picture span {
background: white;
display: block;
width: 100%;
padding: 36px 0 61px;
}
.media-picture img {width: 292px;}
.media-details {
width: 460px;
float: right;
}
.media-details form {
margin-left: 0;
}
td, th {
padding: 5px 5px;
}
form {width: 475px; margin: 34px auto;}
form tr, tr {text-align:left;vertical-align: top; padding:2px;}
form table {width: 475px; margin-bottom: 16px;}
form th {
width: 150px;
vertical-align: middle;
padding: 8px;
}
form td {
padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
width: 100%;
border-radius: 4px;
padding: 10px;
border: 1px solid #a5a5a5;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"] {
width: 475px;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 14px 0 16px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"]:hover {
background: #358dce;
cursor: pointer;
}
.search {
background: #f0eeed;
border-bottom: 3px solid #dddddd;
width:100%;
text-align:right;
}
.search form {
margin: 5px 5px 5px auto;
}
.search form input[type="submit"] {
width: auto;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 6px;
font-family: 'Open Sans', sans-serif;
}
.page p.message {
background: #ffeca4;
border: 1px solid #f16702;
padding: 1em;
width: 444px;
}
.breadcrumbs {
font-size: 14px;
font-weight: normal;
padding: 14px 0 48px;
}
.breadcrumbs a {
text-decoration: none;
color: #3888c2;
}
.note-designer {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.footer {
background: #f0eeed;
border-top: 3px solid #dddddd;
padding: 42px 0;
font-size: 12px;
color: #a5a5a5;
}
.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}
sorry for the long code but this is what I found in style css
As mentioned previously, avoid using tables for anything but actual tabular data. Using it to position elements on the page is unpredictable at best.
You said that you aren't responsible for the front end, but do you have access to the HTML? I'm sure many of us could give you some helpful suggestions but we need a reference point beyond a screenshot :).
You might want to check out how some CSS frameworks handle this, it might give you some inspiration (http://getbootstrap.com/css/#forms). I'm not a big Bootstrap guy but there are a lot of basic examples here on form / table formatting.
You should be able to put just about anything inside a form tag without affecting the way anything on the page looks. Assuming you can't just stop using tables asap, you may have to play around with the css to clean this up. If the form tag is affecting the way anything embedded inside it looks then you might have something in your CSS styling the form element. If possible I would eliminate this styling if it exists.
<?php
session_start();
include_once 'villagedb.php';
if(isset($_SESSION['user'])!="")
{
header("Location: home.html");
}
if(isset($_POST['btn-login']))
{
$email = mysql_real_escape_string($_POST['email']);
$upass = mysql_real_escape_string($_POST['pass']);
$res=mysql_query("SELECT * FROM users WHERE email='$email'");
$row=mysql_fetch_array($res);
if($row['password']==md5($upass))
{
$_SESSION['user'] = $row['user_id'];
header("Location: home.html");
}
else
{
?>
<script>alert('wrong details');</script>
<?php
}
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("c413.jpg");
background-size:100% 100%;
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background-repeat:no-repeat;
cursor:pointer;
}
.three{
margin: -5px;
width:100%;
text-align:center;
top:18.25%;
position:absolute;
color:#555;
font: 50px "Lucida Grande", Tahoma, Verdana, sans-serif;
text-shadow: 0 -2px black;
text-align: center;
}
.four{
margin: 50px auto;
width: 550px;
bottom:0;
position:absolute;
right: 70%;
display; none;
}
.one{
overflow: hidden;
position: fixed;
left:80%;
right:0;
height:75px;
bottom:0;
max-width: 400000px;
margin: 0 auto;
padding:0;
color: #555;
font: 13px "Lucida Grande", Tahoma, Verdana, sans-serif;
}
.one a{
text-decoration:none;
color: #555;
font: 13px "Lucida Grande", Tahoma, Verdana, sans-serif;
}
.container {
width: 100%;
top:28%;
position:relative;
text-align: center;
}
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: white;
text-align: center;
}
.login-help a {
text-decoration: none;
color: #555;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: #777;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
input {
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
}
input[type=text], input[type=password] {
margin: 5px;
padding: 0 10px;
width: 200px;
height: 34px;
color: #404040;
border-radius: 2px;
-moz-outline-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0;
}
input[type=submit] {
padding: 0 18px;
height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
border-radius: 16px;
outline: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}
input[type=submit]:active {
background: #cde5ef;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
input[type=checkbox],
input[type=radio] {
border: 1px solid #c0c0c0;
margin: 0 0.1em 0 0;
padding: 0;
font-size: 16px;
line-height: 1em;
width: 1.25em;
height: 1.25em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb));
-webkit-appearance: none;
-webkit-border-radius: 0.25em;
vertical-align: text-top;
display: inline-block;
}
input[type=radio] {
-webkit-border-radius: 2em; /* Make radios round */
}
</style>
</head>
<body>
<div class="four"> <img src="untitled.png" width="100px" height="85px"></div>
<div class="three">
Village
</div>
<div class="container">
<div class="login">
<form method = "post" action="">
<input type="text" name ="email" placeholder="Username or Email"></input><br>
<input type="password" name ="pass" placeholder="Password"></input><br>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Keep me logged in
</label>
</label>
</p>
<p class="submit"><input type="submit" name="submit" value=" Login" name="btn-login"></p>
</form>
</div>
<div class="login-help">
<p> Forgot your password?</p>
</div>
</div>
<div class="one">
Sign Up<font size="1"> | </font>Terms & Conditions <font size="1"> | </font> More info
</div>
</body>
</html>
The background image in the css is stretch and cover a 25% of the page on load then after php run and reload it works fine.
What could be the problem?
change the css as follows
body
{
background-image: url("c413.jpg");
background-size: cover;
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background-repeat:no-repeat;
cursor:pointer;
}
there is no issue related to php. you can remove the php tag
Hello I am making a chat application, so whenever i click on a online user a chatbox should open, similarly whenever multiple chatbox should open when i click a different users. I am appending div for a each time a user click on a online user. I am facing some issues with css.
Is this because i am using same css for each new chatbox. Here is my code for adding a chatbox dynamically.
$(".shout_msg").click(function(){
var id = $(this).attr('id');
var name = $(this).text();
alert("name is "+ name + "id is " +id);
$('body').append("<div class = 'shout_box'></div>");
$(".shout_box").append("<div class = 'header'>'"+name+"'</div>");
$(".header").append("<div class='close_btn'> </div>")
$(".shout_box").append("<div class = 'toggle_chat'></div>");
$(".toggle_chat").append("<div class = 'message_box'></div>");
$(".toggle_chat").append("<div class = 'user_info'></div>");
$(".user_info").append('<input name = "shout_message" id = "shout_message" type = "text" placeholder = "Type Message Hit Enter" />');
})
shout_msg is a paragraph which show a single online user.
This is my css
<style type="text/css">
.shout_box {
background:#627BAE; width:260px; overflow:hidden;
position:fixed; bottom:0; right:20%; z-index:9;
}
.shout_box .header .close_btn {
background: url(close_icon.png) no-repeat 0px 0px;
float:right; width:15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float:right; width:15px;
height:15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold; color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none; cursor:pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF; height: 200px;
overflow:auto; border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px; display: block;
border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
.time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal; float:right; color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;margin-top: 10px;
}
.user_info input {
width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold; display: block;
}
.userdisplay{
width: auto;
height: 30px;
border-radius: 10px;
background-color: #627BAE;
}
.userdisplay p{
width: auto;
//background-color: yellow;
padding : 10px;
}
.userdisplay a{
float : right;
}
</style>
I am developing a site using a dynamic PHP header and seem to have gotten that part working. My issues came when trying to put the remaining content in the container div along with the header div. All other content is ignored and gets pushed to the left and down below the container. I want it to be INSIDE the container and center on the page like the header does.
Here is where I am with the site:
http://maniandcompany.com/test/test/Print.php
I have tried several things including overflow:hidden; to no avail.
Here is the HTML Page
<div id="container">
<div id="header">
<?php include 'header.php'; ?>
</div>
<div id="body">
<div class="text">
<h1>Title H1</h1>
<h3>H3 Copy</h3>
<h2>H2 Title</h2>
<p>body copy p</p>
<span class="more_pictures">more images:</span>
</div>
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div>
<div style="clear: both;"></div>
</div>
Here is the CSS
/*Container*/
#container {
width:790px;
margin:auto;
overflow:hidden;
}
/*Body*/
#body {
width:790px;
margin-top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #484941;
overflow:hidden;
}
.main_image {
float:right;
width:527px;
height:350px;
margin-left:3px;
}
.text {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
width: 220px;
min-height: 350px;
margin-left:20px;
margin-right:20px;
}
.text h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #666;
text-transform: uppercase;
}
.text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #F60;
}
.text h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-style:italic;
color: #CCC;
padding-bottom: 20px;
}
.text p {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #999;
padding-bottom:10px;
}
.text .more_pictures {
font-size:9px;
font-style:italic;
color: #999;
}
/*header*/
#header {
width:790px;
height:140px;
}
#head {
width:790px;
}
/*logo*/
#logo {
float:left;
width: 260px;
height: 100px;
}
/*main navigation*/
#nav_main {
float:left;
font-size: 12px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-style: italic;
width:240px;
height:20px;
text-align:center;
margin-left:20px;
margin-top:110px;
position:absolute;
z-index:2;
}
#nav_main .current {
float:left;
padding-right: 10px;
color: #F60;
text-decoration: none;
}
#nav_main .current a:link {
color: #F60;
text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active {
color: #F60;
text-decoration: none;
}
#nav_main .inactive {
padding-right: 10px;
float:left;
color: #000;
text-decoration: none;
}
#nav_main .inactive a:link{
color: #000;
text-decoration: none;
}
#nav_main .inactive a:visited {
color: #000;
text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
color: #F60;
text-decoration: none;
}
/*NAV STYLES*/
#nav {
float:right;
height: 100px; /*height of our content box*/
width: 527; /*width of our content box*/
margin-left:3px;
}
#nav #greybox {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-bottom:5px;
}
#nav #greybox2 {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-top: 60px;
}
/*Thumbstrip*/
#nav #thumbStrip {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color: #F60;
-webkit-backface-visibility: hidden;
float: left;
height: 70px;
width: 527px;
margin-bottom:5px;
}
#nav #thumbStrip .thumb {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 3px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumb:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
#nav #thumbStrip .thumb p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumb img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #F60;
}
/*Thumbstrip First*/
#nav #thumbStrip .thumbfirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 0px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumbfirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbfirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbfirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active first*/
#nav #thumbStrip .thumbActiveFirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActiveFirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActiveFirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active*/
#nav #thumbStrip .thumbActive {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
margin-left: 3px;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActive:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActive p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActive img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #fff;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
Thanks in advance for your help.
line 119 on the source page has a div closing tag that is ending you 'body' div before your 'clear' div.
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div> <-- erase this closing tag.
<div style="clear: both;"></div>
</div>
Not to mention you have 2 sets of opening and closing head and body tags. im not sure if you're including a php file with those and then repeating them in your other pages or what, but there are a lot of stray tags on that page.
I want to send html data like,
<div style='padding: 0px; overflow: auto; width: 194px;' id='bar1'><div style='float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 60px'><div style='float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;'></div></div></div>
from one php page to another.
I have tried doing this via POST but all the div data gets changes to this in the page I am sending the html data to,
<div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 20px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 4px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 2px\'></div><div style=\'float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;\'></div><div style=\'float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 20px\'></div><div style=\'clear:both; width: 100%; background-color: #FFFFFF; color: #000000; text-align: center; font-size: 11px; margin-top: 5px;\'>asdc</div>
Can anyone tell me where am I going wrong with this and how can I keep the integrity of the data between the php pages.
EDIT 1:
Code that is sending the data is as follows, (#pdf_data is a textarea)
function export_as_pdf2(div_id)
{
removeAllLinks('remove');
div_id = 'bar1';
var content = $('#'+div_id).html();
content=content.replace(/\"/g,'\'');
$('#pdf_data').val(content);
$('#pdf_format_form').submit();
}
Magic Quote is on in your php.ini settings that's the reason why it's automatically adding slash () to every single quote. Turn off magic quote, as it's good practice. If not, use stripslashes($_POST['post_var']). Don't use $_REQUEST anymore, it's not a good practice.