Stumped to find out the layout for this page is wrong in both IE and Firefox, with completely (as far I know) neutral code.
In IE the box containing this next is far too huge for it.
In Mozilla it is too small.
Mozilla shows box shadows when I use the property:
box-shadow
Which is very strange, I thought it used -moz-box-shadow
Here's what's going on: http://i.imgur.com/SvPAP.png (that line on the Mozilla box is from photoshop).
Here's all associated code:
HTML:
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
<link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />
<head>
<body>
<div class="divCentre">
<div class="divTitleCon">
<p class="titleText">What Is This?</p>
</div>
<div class="divContentCon">
<p class="contentText">
TEXT
<br /><br />
TEXT
<br /><br />
TEXT
<br /><br />
<span class="footerText">
TEXT
</span>
</p>
</div>
</div>
</body>
</html>
CSS PAGE:
html, body
{
margin: 0;
padding: 0;
}
body
{
background-color: rgb(241, 250, 253);
}
.divCentre
{
position:absolute;
top: -25%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 380px;
height: 230px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(200, 200, 200, 1); /* BORDER */
background-color: rgba(255, 255, 255, 1); /* BACKGROUND */
color: rgb(100, 100, 100);
-moz-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
-webkit-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
}
.divTitleCon
{
position: relative;
width: 100%;
height: 15%;
}
.divContentCon
{
position: relative;
margin-top: 20px;
width: 100%;
height: auto;
max-height: 80%;
word-wrap: break-word;
overflow: hidden;
}
CSS TEXT:
p
{
margin: 0;
padding: 0;
}
.titleText
{
font: 32px Arvo;
text-shadow: 0px 1px rgb(255,255,255);
}
.contentText
{
font: 14px PT Sans;
color: rgb(150, 150, 150);
text-shadow: 0px 1px rgb(255,255,255);
}
.footerText
{
color: rgb(200, 200, 200);
}
It appears that Mozzila and Chrome render text completely differently (the text in question here is from Google's font API, maybe a more local version wouldn't have this issue. I'll experiment).
Anyway, specifying the line-height and using a common font is important.
Specifying just line-height will fix the gap between lines, spaced by <br /><br />, however, the amount of text on that line will vary.
Firefox tended to squash it together more, while Google rendered it 'correctly', which is understandable. The fonts from Google's API are probably optimised for -webkit-, or their fork of it.
Either way this is annoying but a required workaround.
TL;DR:
Fixed by changing:
font: 14px PT Sans;
to
font: 14px Arial, Sans-Serif;
line-height: 14px;
Related
This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
I have a transparent navigation bar that is fixed, and i am trying to get an image, or even just text aligned to the left. The following is the html code and css code I am using:
-------------------------------------------html code------------------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Home</title>
</head>
<body>
<div id="navigation">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
<div id="content">
Content Here!
</div>
</body>
</html>
-------------------------------------------------CSS Code------------------------------------------
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
text-align: center;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
padding-top: 5px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation a:visited {
color: white;
}
#content {
width: 80%;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
Thanks for any help!
-Aaron
You could use css floats.
CSS
#navigation div.block-left {
float: left;
}
#navigation div.block-right {
float: right;
}
HTML
<div id="navigation">
<div class="block-left">
Put stuff here!
</div>
<div class="block-left">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
Because both blocks are floating left they will stack in order from left to right.
Also, you shouldn't be using anymore as afaik its deprecated. Better options would be or
I think you will need to explain further, but if I correctly understood what you want, you might try this:
#navigation {
background-image: url('path/to/img.gif');
}
I'm developing my first web application using Google App Engine. Now, while the core backend program is working and ready, I'm having some trouble working with the UI of the website. Now, the width of my website is extending beyond the given screen, which I do not want.
You can see the live version of the site here:
http://deploymentapp.appspot.com/
Now, the site is still under development, please pardon my terrible try at web designing for now.
As can be seen from the site, the width of the whole site is extending beyond the screen width.
Here's the HTML code:
<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
margin:0px;
padding:0px;
}
body
{
width:100%;
background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
background-position: top center;
background-repeat:no-repeat;
}
input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}
#form
{
position:relative;
left:730px;
top:300px;
}
</style>
</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>
<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</form>
</body>
</html>
Also, I have copied most of the CSS from another source.
How can resolve this problem?
Your problem lies in #form.
Your left won't always be the right amount.
You need to use % instead of px.
This is called responsive web design.
If you want it non-obstructing the quora logo, I seem to have fixed it by changing left to 50%
You need to turn your css to be responsive.
Instead of using px in #form, just use % like this:
#form {
margin-top:300px;
margin-left:55%;
}
There is a nicer way to have the same result. It's to float the form to the right and set a margin-right.
#form {
float:right;
margin-right:15%
margin-top:300px;
}
Behind responsive there is much more then this, if you want to read more start from this link: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
I have adjusted my bottom attribute to display how I want it in Firefox, but the spacing is all warped in Chrome and Safari. Is there a way to sett a different "top" attribute for each browser?
HTML
<a class="tooltip" href="#"> <!-- this tag activates my tool tip -->
<div class="handsevent" > <!-- this div contains everything that activates the tool tip when hovered over-->
<div class="handswrapper">
<div class="handshour" >
<h3>8:00am-noon</h3>
</div>
<div class="handsspeaker">
<h3>Speaker 3</h3>
</div>
</div>
<div class="handstitle">
<p>Description</p>
</div>
</div>
<span class="classic"> <!-- this span contains everything that pops up in the tool tip -->
<h3>Title Bar</h3>
<br />lots of descriptive text
</span>
</a>
CSS
/* HOVER WINDOW */
.tooltip {
color: #000000; outline: none; font-style:bold;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 30px 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Arial, Tahoma, Helvetica, sans-serif;
position: auto; left: 1em; top: 2em; z-index: 99; <!-- the 'top' attribute on this line is where I have been adjusting the display position it affects the position differently in different browsers -->
margin-left: 0; width: 700px; margin-top:-10px;
}
.tooltip:hover img {
border: 0; margin: -30px 0 0 90px;
float: right; position:fixed;
z-index: 99;
}
.tooltip:hover em {
font-family: Arial, Tahoma, Helvetica, sans-serif; font-size:14px; font-weight: bold; color:005DA4;
display: block; padding: -0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #ffffff; border: 1px solid #ffffff; }
I have tried pixels, em, and percentage. None of these have been consistent. Are there browser specific settings I could use?
here is a demo link for reference.
Using a CSS Reset will help to eliminate differences between browsers.
I switch the top attribute in ".tooltip:hover span" to "auto" and that seems to be working.
I am currently developing a back end interface for a client of mine and i've hit a brick wall. It seems that Internet Explorer (all versions, including 9 beta) and Chrome are not displaying the page as desired. Firefox and Safari are displaying the page perfectly. I find it rather strange that it works on safari but not chrome.. anyway that's besides the point.
How the form looks in Safari and Firefox - it is the desired outcome:
How the form looks in all browsers other than Safari and Firefox - this is not desired:
I'm after a way to make the background expand to the width that is set in the css in these other browsers. Any hints and tips would be much appreciated as I've been stuck on this for about 5 hours today and it's starting to get very frustrating for me.
After some help, i've narrowed the problem down to the jQuery plugin "equal height columns" however I require the effect is has, so surely there is a way to make this work in the other browsers.
My HTML is:
<head>
<meta charset="UTF-8">
<title>User Login</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<script type="text/javascript">
$(document).ready(function() {
$("#form_left, #form_right, #form_right input").equalHeightColumns();
});
</script>
</head>
<body>
Forgot Password?
<div id="container">
<div id="header">
<h1>User Login</h1>
</div>
<div id="form">
<form name="login" action="#" method="post">
<div id="form_left">
<label for="">Username</label>
<input type="text" id="username" />
<label for="">Password</label>
<input type="password" id="password" />
</div>
<div id="form_right">
<input type="submit" name="submit" value="Log In" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
</body>
and the CSS:
//*
TYPE
*/
a.loginmeta { position: absolute;
right: 20px; top: 20px;
color: #4a4f5b;
font-size: 12px; }
a.loginmeta:hover { color: #5d6472; }
/*
STRUCTURE
*/
body { background: url('../images/page_background.png') repeat; }
#container { width: 480px; display: block;
margin: 100px auto 0 auto; }
/*
FORM
*/
form { width: 480px; margin: 30px 0 15px 0; }
form label { color: #919191;
text-transform: uppercase;
display: block;
margin-bottom: 10px; }
form input { background: #ffffff;
border: 1px solid #d1d1d1;
font-size: 17px;
color: #414141;
padding: 10px; margin-bottom: 10px;
width: 328px; }
#form_left, #form_right { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#form_left { float: left;
width: 350px;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
padding: 20px 20px 10px 20px; }
#form_right { float: right;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }
#form_right input { width: 80px;
font-size: 12px;
text-transform: uppercase;
color: #939393;
background: none;
border: none;
margin: 15px 0;
padding: 0; }
***
Thank you!
I don't know if this helps, but since your problem seems to be coming from the plugin, maybe you could try this instead :
var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
var columnHeight = $(this).height();
if (columnMaxHeight < columnHeight) {
columnMaxHeight = columnHeight;
$(this).height(columnMaxHeight);
}
});