I have a problem with the Firefox browser. You can see it here. Unminified version of css (using LESS): here.
All browsers display it very well, but Firefox moved the form in the pink lane to the top of the page. Do you know what the problem might be?
Thank you!
Adding
clear:both
on #formPruh will solve this please check if its work fine in all browser
after applying Clear:both on #formPruh
please change margin-top:250px to 55px; in #kategories
See this quick firebug solution shot
try this in your css
#formPruh {
width: 100%;
height: 120px;
form label {
font-weight: bold;
color: white;
}
form table {
position: relative;
margin-left: 60px;
top: 210px; /* changed----------- top: 15px;*/
tr {
height: 40px;
border: 1px solid red;
td.popis {
text-align: right;
padding-left:5px; /* changed----------- padding-left: 30px;*/
}
td.input input, td.input select {
width: 150px;
height: 25px;
padding: 0;
margin: 0;
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: Verdana, Arial, sans-serif;
font-size: 105%;
}
}
}
}
You have to clear your floated DIV (logo, actions, user). Write like this:
#formPruh {
clear: both;
height: 120px;
width: 100%;
}
Related
Can't figure out the way that the button would be shown the same in all systems and browsers, any help?
the screenshots:
https://www.browserstack.com/screenshots/550281a9fe2a9b7d36614ec53391db509557c4f9
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px; }
<div class='container' id="gavejai">
<button onclick="addfield();" type="button">+</button>
Browsers still have some inconsistencies in css rendering, even same version of browser between different operating systems, make sure you defined ALL the css properties of element, which may be different between them. here's the code:
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px;
/* add these styles */
font-weight: 300;
line-height: 35px; /* must be equal to height property */
display: inline-block;
vertical-align: middle;
}
[edit] I recommend using CSS Reset at the top of your css code which tries to remove this inconsistencies http://html5doctor.com/html-5-reset-stylesheet/
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you
http://rusticblonde.hostizzo.com/
Hi there,
please can someone help. Ive done this on a "float" style with % margins etc.... but when for example i resize the browser the sidebars go all messy...
This is my CSS markup
#MainContent {
width: 53%;
float: left;
margin-left: 110px;
margin-top: -247px;
padding-top: 0px;
background-color: #ffffff;
font-family: verdana;
padding-left: 10px;
padding-right: 10px;
font-weight: 100;
font-size: 8pt;
color: #000000;
}
#rightsidebar {
background-color: #ffffff;
width: 26%;
float: left;
margin-left: 15px;
margin-top: -247px;
}
#FooterWrapper {
width: 81.2%;
clear:both;
height: 20px;
background-color: #145618;
color: #ffffff;
margin-top: 0px;
margin-left: 110px;
padding-bottom: 10px;
}
#chunkyfooter {
clear: both;
overflow: hidden;
width: 81.2%;
padding-top: 8px;
margin-left: 110px;
text-align: center;
font-family: verdana;
font-size: 10px;
}
Any ideas how to fix this?
thanks :)
Kirsty
Try not to mix two units in the same element, maybe this is the cause of your problems.
Some people like to mix the two kinds of units, pixel and percentage, but I always try to always use pixels.
My suggestion, choose the one you are most comfortable with and stick with it and as long as you don't mix different units in the same element you should be fine.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
So here's my problem. I am using a liquid layout on my page, so that the site always fits the width of the window. works perfectly, sounds great, right? the problem that i'm having is that whenever the window is resized, the divs start moving, overlapping, and wrapping to the next line.
here's my site, so you can see what i am talking about: http://www.kaiserroof.com/test/index2.html
i'm somewhat new to css design. i'm sure there is an easy fix, but i can't figure it out. can someone help me? (soon, please. i'm so ready to be done with this website :) ) Here is my CSS code:
html {
padding: 0px;
margin: 0px;
width: 100%;
position: static;
border-collapse: collapse;
overflow-x: hidden;
}
body {
padding: 0px;
margin: 0px;
width: 100%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #555;
font-weight: 100;
line-height: 18px;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
min-width: 600px;
background: #eeeeee;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #555;
font-weight: 100;
line-height: 18px;
}
#row1 {
width: 100%;
float: left;
background: #eeeeee;
}
#row2 {
width: 100%;
float: left;
}
#row3 {
width: 100%;
float: left;
padding-top: 300px;
}
#row4 {
width: 100%;
float: left;
}
#row5 {
width: 100%;
float: left;
}
#logo {
float: left;
width: 13.5%;
}
#phone1 {
width: 85%;
float: left;
text-align: right;
}
#phone2 {
width: 79%;
padding-right: 6%;
float: left;
height: 54px;
text-align: right;
vertical-align: top;
}
#buttonmenu {
width: 86.5%;
float: left;
border: none;
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
#backgroundleft {
float: left;
position: absolute;
z-index: 1;
}
#intro {
float: left;
position: absolute;
z-index: 2;
padding-left: 15.5%;
}
#form {
width: 34.5%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-left-style: none;
padding-bottom: 76px;
}
#estimates {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 20px;
}
#form1 {
padding-left: 20px;
}
#welcome {
width: 34.75%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-left-style: none;
border-right-style: none;
text-align: center;
padding-top: 10px;
}
#linksright {
width: 30.5%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-right-style: none;
text-align: right;
padding-top: 10px;
padding-bottom: 92px;
}
#bottomleft {
width: 23%;
float: left;
padding-left: 50px;
padding-top: 10px;
}
#bottommiddle {
width: 50%;
float: left;
padding-top: 10px;
text-align: center;
}
#bottomright {
width: 20%;
float: left;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: #BBBBBB;
}
a {
text-decoration: none;
color:#000;
line-height: 20px;
}
A:hover {
text-decoration: underline;
color: #000
}
.alternate {
padding-right: 20px;
}
.object {
outline: none;
}
#object {
outline: none;
margin: 0;
display: block;
}
Some things just can't be wrapped onto a new line, such as form elements. You can hide the problem by setting a min-width on each of those columns (#form, #welcome, #linksright), so they won't shrink down past a certain point. Or a larger single min-width on #container, since 600px obviously isn't enough to keep stuff from overlapping.
Without the corresponding HTML it is hard to tell. But let me do a guess. As you align many elements using "float" and "width: 100%" they are not in the text-flow anymore. Therefore they might not resize with the rest of the page. On some elements it might be useful to make the use "display: inline-block" instead of "float".
Really I would suggest that you just use a 3 column fixed width layout. Stretching those divs is not going to look good and will make things render weird. Try wrapping the whole site in a wrapper div and then centering it. That way you wont have to deal with the craziness of stretching divs.
div#wrapper{
margin: 0 auto; // this will make everything center automatically.
width: 960px;
}
Sorry to not answer your question but to suggest a different solution. I am just not a fan of liquid layouts.
You make the two outer columns a static width and make the center a percentage. You can also use a percentages for the left, right margins as well.