My client looks great in Firefox but looks a little funky in Chrome :(
Here's some of my html code.. from the Inventory layout
<div class="clientinventory">
<div class="objtitle">
<p>Ore Inventory</p>
</div>
<div class="invitemvalue">10</div>
<div class="invitemtxtholder">Copper</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Iron</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Gold</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Platnium</div>
</div>
Here's some of my css code.. from the Inventory layout
.invitemtxtholder {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
background-color: #543C25;
border: 1px solid #000;
color: #FFF;
width: 60px;
text-align: center;
float: left;
clear: left;
}
.invitemvalue {
clear: right;
float: right;
font-style: italic;
color: #000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
width: 65px;
}
NOTE: I'm not allowed to post pictures apparently lol so heres the link
http://www.ultimate-miner.com/UM2/Client.php
I can see a difference.
The Submit button jumps down in firefox but stays inline in chrome.
Add some width with css to the submit button and that will be fixed :)
Related
I have figured out a new problem in TCPDF (new for me), ie I can't place elements next to each other. I have tried so many solutions but they were zero in the end. Seems like TCPDF doesn't support the converting from all the css attributes. Hope you can help ;)
The code I had tried:
<style>
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader div{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
horiz-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
</style>
And the html:
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Thanks in advance for the answers!
Maybe this is your problem:
You are adding this:
.protHeader div{
width: 100%;
}
that means, that every <div> in your class .protHeader has 100% width.
EDIT: (i change the last part of the css and colored the inline-block divs red, for viewing that they should stay next each other)
Try to remove this line or change your styling to:
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader .fl_left{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
.protHeader .fl_left div {
background-color: red;
display: inline-block;
}
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Okay, found a method, I had changed the whole framework to another (dompdf), which is easier to use and supports the newer CSS too.
Previously i have added color red to my css code. However, i have deleted the code. But the red still remain on the web. What should i do? This is the html on my php file.
echo " <div class='toship-info'>
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br><strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong></br>
</div>
</div>
";
This is my css file. How should i change it?
.toship-info{
width: 600px;
margin: auto;
}
.toship-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content{
background: rgb(238,238,238);
height: 130px;
padding-top: 10px;
}
.toship-att{
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data{
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item{
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
[![enter image description here][1]][1]}
Try to open in other browser, or if you are using any framework or cms then clear view cache.
Your browser probably cached the page. Try to clean your history/cache. How to do this depends on the browser you are using. For example, in Chrome you will go to History > History > Clear navigation data... > Image and files stored in cache. Also, as #rrd said in comments, in most browsers (Chrome included) Ctrl+R will reload the actual page and not the cached one.
Ctrl-F5 will do the trick. It's in the browser cache. Ctrl-F5 will ask for a complete new request and hence avoid the cache.
When i use the below code i don't see any red text
<style>
.toship-info {
width: 600px;
margin: auto;
}
.toship-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content {
background: rgb(238, 238, 238);
height: 130px;
padding-top: 10px;
}
.toship-att {
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data {
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item {
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
</style>
</head>
<body>
<div class='toship-info'> "
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br>
<strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong>
<br />
</div>
</div>
</body>
Please make sure you markup your HTML properly..
was incorrectly marked up
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
I've got a php code that takes a description from a database and show it next to an image.
When I put margin-left: 5px; to the description it works perfectly, but only in the first line, because when there are two lines only works the margin-left at the first.
I can interpret it in html like this:
<div class="gamedes">
<img class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides>
<a class="gametitle" href="game.php?name='.$row['name'].'">'.$row['name'].'</a>'
<div class="description"><script></script></div><br><br><br><br>'
</div>
</div>
And in the CSS
.miniaturas {
display: inline;
border-radius: 10px;
float: left;
}
.description {
font-size: 15px;
display: inline;
border-radius: 3px;
margin-left: 5px;
overflow: hidden;
}
.gametitle{
font-size: 20px;
font-weight: bold;
display: table-cell;
margin-left: 5px;
}
.gamedes {
width: 50%;
display: inline-block;
}
So how I can put the margin-left at the second line?
Here is the demo: http://jsfiddle.net/Ninjacu/G6tqc/
UPDATE based on comment below:
fiddle: http://jsfiddle.net/3qvGt/
CSS:
.miniaturas {
display: inline;
border-radius: 10px;
float: left;
}
.indent5px{
margin-left: 5px;
}
.description {
font-size: 15px;
display: inline;
border-radius: 3px;
overflow: hidden;
}
.gametitle{
font-size: 20px;
font-weight: bold;
display: table-cell;
margin-left: 5px;
}
.gamedes {
width: 50%;
display: inline-block;
}
HTML:
<div class="gamedes">
<img class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides">
<a class="gametitle" href="google.es">Hola</a>
<div class="indent5px">
<div class="description">sdsdsdsds sdsdssdsd</div><br><br><br><br>'
</div>
</div>
</div>
I have used Safari to view my layout up until now. Everything appeared perfectly as I wanted it to in Safari, a simple layout with a logo, navigation bar, header image, and then a two column body area. However, in Firefox, both the header image and logo are not even displaying, and the two column float for the body area is not working and instead sinking into one... I am not sure what is going on, or what types of problems I will encounter in other browsers, but maybe someone can find what is wrong:
body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}
#wrapper {
width: 950px;
background-color: some color;
margin: 0 auto;
text-align: left;
border-right: 1px solid some color;
border-left: 1px solid some color;
}
#logo {
background-image: url('some url');
height: 100 px;
text-align: left;
border-style: none;
}
#navigation {
background-color: some color;
text-align: center;
border-top: 2px solid some color;
border-bottom: 2px solid some color;
height: 30 px;
}
#navigationElement {
display: inline-block;
padding-top: 2 px;
padding-left: 10 px;
padding-right: 10 px;
border-style: none;
}
#navigationElement a:link {
color: some color;
text-decoration: none;
}
#navigationElement a:hover {
color: some color;
font-weight: bold;
}
#headerImg {
background-image: url('some url');
height: 200 px;
text-align: left;
border-style: none;
}
#left {
background-color: some color;
width: 475 px;
float: left;
text-align: center;
border-style: none;
}
#leftElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#right {
background-color: some color;
width: 475 px;
float: right;
text-align: center;
border-style: none;
}
#rightElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#footer {
background-color: some color;
height: 40 px;
text-align: left;
border-style: none;
clear: both;
}
Here is the html code:
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="navigation">
<div id="navigationElement">nav 1</div>
<div id="navigationElement">nav 2</div>
<div id="navigationElement">nav 3</div>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="left">
<div id="leftElement">
left element text 1
</div>
<div id="leftElement">
left element text 2
</div>
</div>
<div id="right">
<div id="rightElement">
right element text 1
</div>
<div id="rightElement">
right element text 2
</div>
</div>
<div id="footer">some footer text</div>
</div>
</body>
It's probably because you are using spaces between values and px in height attributes (i.e height: 100 px; should be height: 100px;). Different browsers handle these kind of errors differently, so it's always a good idea to validate your css when you're having weird errors: http://jigsaw.w3.org/css-validator/
Remove the spaces between your pixel values.
height: 100 px; to height: 100px;