I am trying to send mail to list of users with unpaid orders.
I am fetching orders in foreach loop and also have added inline style to the elements. The style works great in front end . See below:
But on email there are some links that are not styled.
Here is my code :
foreach($sid as $si) {
$message .="<li style='padding: 7px;width:90%;'>Order Number: ".$si."<A style='background: #E68126; color: #fff ; text-decoration: none; padding: 5px 10px; float: right;' href='#'>View Order</A></li><br>";
}
I am using php mail function with custom headers.
And the full html :
$message = // contents of report in $message
"
<html>
<head></head>
<body>
<div style='background:rgb(242,242,242) none repeat scroll 0% 0%;font-family:Verdana, Geneva, sans-serif;padding:6% 10%;font-size:14px;font-weight:400;color:rgb(0, 0, 0);'>
<div style='background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 2px solid rgb(0, 0, 0); padding: 20px;font-family:Verdana, Geneva, sans-serif;'>
<IMG style='padding: 10px 0px;' SRC='sample.png'/>
<hr style:'border:1px solid #000;'><BR><h2 style='color: rgb(0, 0, 0);font-weight:bold;font-size:22px;text-align:center;text-transform:uppercase;font-family:Verdana, Geneva, sans-serif;' >Order Unpaid</h2>
<span style='display: block; font-size: 18px; color: rgb(0, 0, 0); padding: 10px 0px;font-family:Verdana, Geneva, sans-serif;'>Hello ,</span>
<span style='display: block; color: rgb(0, 0, 0), 120); padding: 10px 0px;font-family:Verdana, Geneva, sans-serif;'>There are unpaid orders in your account.</span>";
foreach($sid as $si) {
$message .="<li style='padding: 7px;width:90%;'>Order Number: ".$si."<a style='background: #E68126; color: #fff !important; text-decoration: none !important; padding: 5px 10px !important; float: right !important;' href='https://www.test.com/index.php/order/view/id/".$si."'>View Order</a></li><br>";
}
$message .= "<span style='display: block; padding: 10px 0px 20px; rgb(0, 0, 0);font-family:Verdana, Geneva, sans-serif;'><br>You can view orders in your account information.<br></span><br> <A STYLE='color: #ffffff; background: #E68126 ; text-decoration: none; padding: 12px 19px; border-radius: 6px; width: 200px; text-align:center; margin: 3px auto; display: block; font-size: 15px; text-transform: uppercase;font-family:Verdana, Geneva, sans-serif;' href='https://www.test.com/index.php/order/index/type/1' target=_blank>View Account</A><span style='display: block; padding: 20px 0px 10px; color: rgb(0, 0, 0); line-height: 25px;font-family:Verdana, Geneva, sans-serif;'><br>If the request was sent not by you, on your petition or without your permission please inform to our security service via support#test.com.</span><span style='display: block; padding: 30px 0px 0px; font-size: 12px; color: rgb(0, 0, 0);font-family:Verdana, Geneva, sans-serif;'>Happy shopping, </span><span style='display: block; padding: 9px 0px 10px; font-size: 13px; color: rgb(0, 0, 0);font-family:Verdana, Geneva, sans-serif;'>Always welcome Test team</span><hr style:'border:1px solid #000;'><span style='display: block; padding: 9px 0px 10px; font-size: 14px; text-align:center; color: rgb(0, 0, 0);font-family:Verdana, Geneva, sans-serif;'> © 2015 Test technologies ltd</span></div></div></body></html>";
Related
I am unable to convert this code into dynamic. how to adjust width of div so that it adjust dynamically. When we use any device like mobile desktop tablet or any other device it should display same. when we resize it it does not change appearance. I adjusted width using percentage but it not work properly.
<div class="bubble1" style="background: rgb(255, 255, 255); border-radius:
10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family:
Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position:
relative; width: 650px; z-index: 9;">
<div class="rectangle" style="background: rgb(127, 157, 185); box-shadow:
rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px;
position: relative; top: 30px; width: 680px; z-index: 10;">
<h2 style="color: white; font-size: 30px; font-style: italic; font-
weight:
normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px;
text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
abash</h2>
</div>
<div class="triangle-l" style="border-color: transparent rgb(125, 144, 163)
transparent transparent; border-style: solid; border-width: 15px; height:
0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
</div>
<div class="triangle-r" style="border-color: transparent transparent
transparent rgb(125, 144, 163); border-style: solid; border-width: 15px;
height: 0px; left: 650px; position: relative; top: 35px; width: 0px; z-
index: -1;">
</div>
<div class="info" style="color: #999999; padding: 60px 25px 35px;">
<div id="inf303">
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Meaning</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
शर्मिंदा करना, Cause to feel embarrassed</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Key</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Link</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Synonyms</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
Embarrass, shame, disconcert, confound, awe</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Usage</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
she was not <span style="background-attachment: initial; background-
clip: initial; background-image: initial; background-origin: initial;
background-position: initial; background-repeat: initial; background-size:
initial; border: none; color: #333333; padding: 0px
2px;">abashed</span> at being caught</div>
</div>
</div>
</div>
Not a good practice to inline-style everything in your HTML.
You can use media-query that below 680px screen size, your div will take whole width of the container.
.bubble1 {
width: 650px;
}
.rectangle {
width: 680px;
}
.triangle-r {
left: 650px;
}
#media only screen and (max-width: 680px) {
.bubble1 {
width: 100%;
}
.rectangle {
width: 110%;
}
.triangle-r {
left: 100%;
}
}
<div class="bubble1" style="background: rgb(255, 255, 255); border-radius:
10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family:
Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position:
relative; z-index: 9;">
<div class="rectangle" style="background: rgb(127, 157, 185); box-shadow:
rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px;
position: relative; top: 30px; z-index: 10;">
<h2 style="color: white; font-size: 30px; font-style: italic; font-
weight:
normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px;
text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
abash</h2>
</div>
<div class="triangle-l" style="border-color: transparent rgb(125, 144, 163)
transparent transparent; border-style: solid; border-width: 15px; height:
0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
</div>
<div class="triangle-r" style="border-color: transparent transparent
transparent rgb(125, 144, 163); border-style: solid; border-width: 15px;
height: 0px; position: relative; top: 35px; width: 0px; z-
index: -1;">
</div>
<div class="info" style="color: #999999; padding: 60px 25px 35px;">
<div id="inf303">
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Meaning</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
शर्मिंदा करना, Cause to feel embarrassed</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Key</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Link</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Synonyms</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
Embarrass, shame, disconcert, confound, awe</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Usage</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
she was not <span style="background-attachment: initial; background-
clip: initial; background-image: initial; background-origin: initial;
background-position: initial; background-repeat: initial; background-size:
initial; border: none; color: #333333; padding: 0px
2px;">abashed</span> at being caught</div>
</div>
</div>
</div>
You could trying setting the width of the div using the vw unit. vw sets the the width of an element in relation to the viewport width. Theres also vh for viewport height.
Example:
width = 50vw;
This sets the width of the element to 50% of the viewport width. Therefore, the width of your div would be dynamically set to fit various screen sizes.
<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block height: fit-content">
test text
</div>
Try This.
To make the page responsive with css you can use the #media only screen property. Media queries allow you to change the style of an element as you prefer for different devices and screen sizes :
#media only screen and (max-width: 400px) //Only apply the following styles for screen sizes than do not exceed a maximum width of 400px.
{
div
{
//Add styles here for all div elements, to be applied only on screen sizes less than 400px wide.
}
body
{
//Add styles here for the document body, to be applied only on screen sizes less than 400px wide.
}
}
Div and body style will be applied only on screens with a width less than 400px.
You can set as many media queries as you want to make your website responsive across all devices.
Please I do not really know what I am doing wrong here. I have a page for image upload. It's working perfectly on localhost but as soon as I uploaded it to remote server, It's not working as I want it. I have changed the folder permission, I have changed the directly still not working. It's not giving me any error. it's showing file uploaded successfully but anytime I check the folder, It's empty. Please help me out. This my code below.
if(isset($_POST['upload']))
{
$tmp_name = $_FILES['passport']['tmp_name'];
if (empty($tmp_name) == false){
$name = $_FILES['passport']['name'];
$type = $_FILES['passport']['type'];
$size = $_FILES['passport']['size'];
list($width, $height, $typeb, $attr) = getimagesize($tmp_name);
if($width<=160 || $height<=160)
{
if($type=='image/jpeg' || $type=='image/jpg' || $type=='image/png')
{
if($size<='20000')
{
if(!get_magic_quotes_gpc())
{
$name = addslashes($name);
$extract = fopen($tmp_name, 'r');
$content = fread($extract, $size);
$content = addslashes($content);
fclose($extract);
//Place image in the folder
$newname="$studentID.jpg";
move_uploaded_file($_FILES['passport']['tmp_name'],"../passports/$newname");
$msg = "<center><p style ='color: #4F8A10; background-color: #DFF2BF; border-radius:.5em; width: 350px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase; padding-left: 12px'>Passport uploaded successfully.. Click the link below to continue</p></center>";
} else {
$uploaderror = "<p style='color: #D8000C; background-color: #FFBABA; border-radius:.5em; width: 300px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase'>Error has occured... Please try again</p>";
}
} else {
$uploaderror = "<p style='color: #D8000C; background-color: #FFBABA; border-radius:.5em; width: 300px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase'>$name is more than 20kb</p>";
}
} else {
$uploaderror = "<p style='color: #D8000C; background-color: #FFBABA; border-radius:.5em; width: 300px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase'>$type is not in acceptable format</p>";
}
} else {
$uploaderror = "<p style='color: #D8000C; background-color: #FFBABA; border-radius:.5em; width: 300px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase'>$name should be 160px * 160px</p>";
}
} else {
$uploaderror = "<p style='color: #D8000C; background-color: #FFBABA; border-radius:.5em; width: 300px; border: 1px solid #D8D8D8; padding: 5px; border-radius: 5px; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 11px; text-transform: uppercase; text-align: center; text-transform: uppercase'>Please choose a file to upload</p>";
}
}
<?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've been designing my site re-learning CSS after taking a long time, and have been essentially creating a website (integrated with WordPress) by basically doing as little as possible with the HTML/PHP, and trying to design it all from the CSS and available CLASS and IDs setup for me by a template theme. (Blankslate Theme)
This entire time it's been coming along fine in Chrome. I decided before I got too far to check it out on Firefox. Firefox decides everything should be squished to the LEFT, while in Chrome the site looks perfectly centered and matches things I try to do in the CSS.
I tried to align both the WRAPPER, Body, and even HTML to center the entire page, but Firefox refuses to do so. My fixed sidebar on the right is suppose to be spaced away from the main content, which it is in Chrome (unless you increase the size of the entire page, then it overlaps.) In Firefox, it doesn't even try to go as far right as possible, it just squishes in with everything else.
I've also wanted to use Ellipsis to cut off the text in the Sidebar if it's too long, however it refuses to work. It either cuts the text off, but does not substitute ellipsis, or runs off the page.
Below is the structure I'd like:
http://www.icesage.com/i/site2.png
Here is the CSS I'm using. As for the PHP/HTML structure you'll need to go to the actual website itself as there are too many to show here. (Again, it's WordPress, and uses the theme Blankslate as a starting point.)
body {
background-color: black;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 110%;
line-height: 20px;
text-size: 10px;
font-family: Verdana;
}
#site-title {
position:relative;
top:0px;
margin: 0 auto;
width: 10%;
display:none;
}
/* #header {
position:relative;
top:0px;
margin: 0 auto;
width: 40%;
} */
#footer {
position: relative;
float: right;
bottom: 0;
margin: 2% auto;
right: 25%;
width: 50%;
height: 10px; /* Height of the footer */
background-color:rgba(0,0,0,0.7);
border-radius: 10px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
text-align: center:
padding-top: 5px;
padding-bottom: 9px;
padding-right: 5px;
padding-left: 5px;
display: inline
}
#copyright {
text-align: center;
}
/* Top Navigation */
#menu {
margin: 0 auto;
}
#menu a {
float: left;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
#menu a:hover {
background-color: blue;
}
.entry-title {
font-size: large;
width:60%;
text-shadow: 2px 0.5px #1c6191;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin: 2px
}
/* h1 .entry-title {
display: none;
font-size: 50px;
}
h2 .entry-title {
display:none;
font-size: 50px;
}
h3 .entry-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
h3 .widget-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
*/
.cat-links {
display:none;
}
/* Main Content Post (Entry) */
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
img.alignright {float:right; margin:20px 10 10em 10em; background-color: royalblue; border: 1px;}
img.alignleft {float:left; margin:20px 10em 2em 2em;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; text-align:center; padding-left: 20px;}
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
.wp-caption-text {
font-size: small;
font-style:italic;
text-align:center;
}
.post-edit-link {
float: left;
color: white;
position: relative;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.post-edit-link:hover {
background-color: blue;
}
.comments-link {
float: right;
color: white;
display: block;
position: relative;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.comments-link:hover {
background-color: blue;
}
.type-page {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 40px
overflow: auto;
}
.nav-previous {
display: none;
}
.comments {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
.comment {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
#header {
width: 60%;
margin: 0 auto;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin-bottom: 40px;
}
#titlebanner {
margin: 0 auto;
}
.meta-sep {
display: none;
}
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
.comment-respond {
color: white;
width: 60%;
float: left;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
margin: 0 auto;
box-shadow: 5px 0px 4px 0px #1c6191;
font-color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
.entry-date {
color: royalblue;
}
#wrapper {
-moz-margin-start: -40px auto;
margin-right: 0 auto;
}
/* Sidebar */
.widget-area {
position: fixed;
top: 225px;
z-index: 1;
right: 0.5%;
text-shadow: 2px 2px #1c6191;
width: 300px;
float:left;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
color: white;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
margin-right: inherit;
}
.xoxo {
display:block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"
}
#searchsubmit {
display:none;
}
.searchform .screen-reader-text {
display:none;
}
.xoxo .screen-reader-text {
display:none;
}
.entry-content {
width: 90%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
text-align:justify;
/* text-shadow: 2px 0.5px #1c6191; */
}
P {
color: white;
}
#search {
display:none
}
#site-description {
display:none
}
A {
text-decoration: none;
font-family:Verdana;
}
A:link {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:visited {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:active {text-decoration: none;
color:#04CCFD;
}
A:hover {
text-decoration: none;
color:white;
}
li .widget-container {
font-color: white;
}
/* Sub-Menu Test */
/* End Sub-Menu Test */
video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
section{display:block}
.clear{clear:both}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
Website: http://www.icesage.com
Or you can take a look at "Blankslate."
Any help in figuring out what I'm doing wrong or pointing out some sloppy code would be appreciated, but the main question for this post is:
How can I contain everything in the wrapper properly and have the entire site centered, including the sidebar, in all browsers (especially Firefox) like how it appears in Chrome? (Additionally, some of the layout was done accidentally, like the Comment & TopNav buttons appearing slightly off the previous area. Which I want to keep, but I'm not sure how to properly keep it that way.)
I searched thoroughly and the answers provided keep telling me the appropriate CSS to use, and I keep using it to no avail. Other questions are simply left unanswered.
Any help would be appreciated!
The problem is coming from the way you used transform-origin for firefox browser. Look at the following class
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
As you mentioned "0 0" for origin property. The first value is the horizontal position, the second value is the vertical. So it aligned to left and top position. If you want horizontally center the page then you need to give "center, top" or "50%,0". Update your CSS like below.
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin:50% 0;
margin: 20px auto;
}
Additional Question asked by OP in the comment box:
do you know why the sidebar is still condensed and overlapping the content on the left, when it doesn't do that in Chrome?
This issue came because the default behavior of chrome and firefox. Look at the following class.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
The default chrome property for box-sizing:border-box and firefox is box-sizing:content-box. This is causing the problem. Check what is the difference between these to here
So force firefox to use border-box property for box-sizing. Update the CSS like below.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
-moz-box-sizing:border-box;
}
The site looks in Chrome exactly as it looks in Firefox. Because of this here:
margin-right: 0 auto;
which is an invalid property for margin-right. You want
margin: 0 auto;