I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
If you're running the latest Chrome Canary build, that could be the problem. All of my extension's popups are showing up like this.
Try on a different build of Chrome?
EDIT: Yeah, I just found some bug reports for Chrome/Chromium:
https://code.google.com/p/chromium/issues/detail?id=180724
https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/09xiPfAfrIc
Set the height and width properties in your html body tag. Means, simply add style to your existing body tag with height and width properties.
Related
still very new to this so apologies in advance.
In my footer, the desktop view works fine. As does the landscape mobile view. Heres how it looks on those two views
Landscape views
But in mobile portrait, the social media icons are missing, where have i gone wrong?
Portrait View
HTML code for my footer
<footer class="nav navbar-fixed-bottom navbar-default">
<div class="container-fluid">
<p>© 2017 Example Example</p>
<ul>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-instagram"></span></li>
<li><span class="fa fa-snapchat"></span></li>
<li><span class="fa fa-youtube"></span></li>
</ul>
</div>
</footer>
CSS for footer styling
footer {
background-color: #000000;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer p {
float: left;
text-align: center;
margin-top: 15px;
}
footer ul {
list-style: none;
display: flex;
flex: 1;
flex-direction: row;
float: right;
font-size:35px;
margin-top: 2px;
}
.fa-twitter {
margin-right:10px;
color: #fff;
}
.fa-twitter:hover{
color: #00aced;
}
.fa-facebook {
margin-right:10px;
color: #fff;
}
.fa-facebook:hover{
color: #3b5998;
}
.fa-instagram {
margin-right:10px;
color: #fff;
}
.fa-instagram:hover{
background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
.fa-snapchat {
margin-right:10px;
color: #fff;
}
.fa-snapchat:hover{
color: #fffc00;
}
.fa-youtube {
margin-right:5px;
color: #fff;
}
.fa-youtube:hover{
color: #cb2027;
}
Any help would be appreciated!
Most likely the ulwith the social icons simply doesn't fit into the width of the footer next to the text of the p tag and is pushed below into a new line (both are floated). But since the height is fixed (50px), it's hidden. Try to change the height of footer to sonething like 100px for testing, then you'll see if this is what's happening. If yes, you have to make everything a little bit smaller (within a media query) so that it can fit into one line.
Your issue is that your social icons are too big, so the entire <ul> is wrapping to the next line, but since you have a defined height on the <footer> it falls outside of the viewport. Try making your icons smaller, or maybe do something to your <p> to have its text wrap two lines in a narrower width.
You might want to try putting body tags around everything like
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body class="works_on_smartphone">
.
.
.
<footer>
.
.
.
</footer>
</body>
</html>
This might help.
Another method you might want to look at is using flexbox for you unordered list
as described here: [1]: Flexbox with Unordered list
Charles
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
For simplicity I've created my style in the document to highlight my problem. I have a row of 4 links that are styled to look like button. The Next link (the 3rd item) I am hiding using css. In IE8+, Chrome, Firefox it works perfectly but in IE7, there is a gap between the Cancel and Accept button (where the Next button would be).
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.ButtonBar
{
margin-top: 20px;
text-align: center;
}
.LinkButton
{
background-color: #01699b;
border: 0px solid;
border-radius: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 0px 11px 0px 11px;
overflow: hidden;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 28px;
}
.NextButton
{
display: none;
}
</style>
</head>
<body>
<div class="ButtonBar">
<a class="PreviousButton"><span class="LinkButton">Previous</span></a>
<a class="CancelButton"><span class="LinkButton">Cancel</span></a>
<a class="NextButton"><span class="LinkButton">Next</span></a>
<a class="AcceptButton"><span class="LinkButton">Accept</span></a>
</div>
</body>
</html>
If you remove all CSS from the .LinkButton class apart from background-color it does the same, I was just including it all to show what I am doing so far.
What should I do to fix this issue?
Didn't you ever wonder where these spaces actually come from?
It's the linebreaks between your inline-elements <a> causing a gap.
<div class="ButtonBar">
<a class="PreviousButton">...</a> <!-- Linebreak! -->
<a class="CancelButton">...</a> <!-- Linebreak! -->
<a class="NextButton">...</a> <!-- Linebreak! -->
<a class="AcceptButton">...</a> <!-- Linebreak! -->
</div>
Now the modern browsers collapse multiple of these, but IE7 does not, so you have actually 2 linebreaks between your elements, causing the gap to be double as wide.
You have several solutions to this:
1) Floating the elements
2) modifying markup:
<!-- end tag on the new line -->
<a>...
</a><a>...
</a>...
<!-- comments in between -->
<a>...</a><!--
--><a>...</a>
<!-- all on one line -->
<a>...</a><a>...</a>
<!-- In some cases (e.g. list elements) you can skip the end tag -->
3) Modifying font sizes
4) Using negative margins- but that could cause issues in older browsers.
What solution you want to take is up to you.
For your special case, where you just hide the element in question you could either declare absolute position or any float on that element.
One solution is to add float:left ONLY to the .NextButton css class. This should work.
I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.
In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).
In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.
Here are the two files:
Header.php
<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; }
html, body { width: 650px; background-color:#F5F5F5;}
</style>
<div class="blue">
<h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>
Footer.php
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:right;
}
a{
display:block;
width:90px;
color:#FFFFCC;
}
</style>
INDEX.PHP
Here I post the index.php
-
<html>
<head> <title> About </title> </head>
<body>
<? include 'header.php'; ?>
<?include 'footer.php'; ?>
</body>
</html>
The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.
I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.
With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started.
header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php/about.php/whatever.php...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css/stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}
Kill the position: absolute on your .blue top bar. You don't need it; since it's at the top of your HTML, it'll be at the top of the page. [The space is probably the result of the default padding on the body.] Try CSS like this:
html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }
To be sure, though, we'd need to see index.php and footer.php.
Why are you setting a width on the html and body elements? That's a little funky. If you want a 600px-wide content area with a gray background, create a wrapper div and apply the background to that:
#wrap { background: #f5f5f5; width: 600px; }
<body>
<div id="wrap">
<?php require "header.php"; ?>
content here
<?php require "footer.php"; ?>
</div>
</body>
Also, style elements should be placed as children of the head element. Or, better yet, in an external stylesheet, so you separate presentation from content.
The reason your getting the padding on the left is because you have <html> on both your header.php as well as the page you are loading the header file on.
Additionally, it would be a better practice to put header and footer into a higher level folder within your server. Then reference that file with
Include("../../header.php");
The styles being within one or two style sheets is the best way to accomplish styling as well. You would need to refer to nodes in you document by parent class and class or IDs. That would allow you to get different styles on different pages but have one style sheet.
<div class='parent'>
<div class='child'>
//do stuff
</div>
</div>
Then style with
<style type='text/css'>
.parent .child{
cool:stuff;
}
</style>
And finally, make sure the style only shows up within the <head> of the page:-)