In the code below, $row['site'] is an URL. In Chrome and IE8, it displays fine. In Firefox 3.0.11, it only displays everything up until the second forward slash. So "en.wikipedia.org/wiki/Miami" is only displayed as "en.wikipedia.org/wiki".
I believe this is because of the CSS that I am using, but I can't quite figure out how to fix it. Any ideas?
Thanks in advance,
John
Here is the code:
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".''.$row['site'].''."</td>";
Here is the CSS:
table.navbar {
margin-left:44px;
margin-top:0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
}
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
}
table.navbar td a{
padding: 3px;
display: block;
}
.sitename { width: 535px;
overflow:hidden;
}
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
}
This is the "culprit":
.sitename {
width: 535px;
overflow:hidden;
}
You are setting any element with a class of .sitename to have a specific width and hiding any overflow.
In addition to that, this is also part of the reason:
a.links2:link {
...
width: 10px;
...
}
Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.
The code you pasted minus the above width declaration gives me what you want on Firefox.
This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:
print <<<EOT
<table class="navbar">
<tr>
<td class='sitename'>
{$row['site']}
</td>
EOT;
Much better, right?
to test this try
.sitename { width: 535px;
overflow:visible;
}
if you see scrollbars try changing the width to an "em" based number
Related
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So can anyone tell what's wrong with my code? So I'm trying to add a blue dashed 'block', but somewhy it doesn't get displayed (it seems like the font gets changed, but the box still doesn't appear). I had an similar problem before, but I don't know what's wrong this time. Am I missing a semicolon somewhere or just wrote something wrong?
When I launch the code in JSFiddle, it seems to work fine, but when I'm opening the SAME code with the .html file, everything still seems not to work (pic: http://i.imgur.com/VT7vR3m.png). I'm Anyone got ideas why (the css file is in right location)?
https://jsfiddle.net/j31dgz70/1/
#info {
color: blue;
background: silver;
}
.welcome {
color: purple;
font-size: 20px;
background-color: aqua;
text-shadow: 1px 1px silver;
}
#tab {
background-color: blue;
}
code {
font-family:"Comic Sans MS", cursive, sans-serif;
display: inline-block;
height: 20px;
width: auto;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<!DOCTYPE html>
<body>
<p id="tab"><b>About page</b>
</p>
<article>
<code class="box">
Contact: Email me
</code>
<br>Return to homepage.
</article>
</body>
It's the <br/> that is causing the problem.
It forces a line break but the height restricts what is visible.
Remove the break tag. If you want spacing, use margins or padding...that's what they are for.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: Email me
</code>
<code class="box">
Contact: Email me<br/>
</code>
Alternate Options if you wanted the 'box' to have two lines
Option 1: Retain the break tag but move it. (Not optimal but ok)
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: <br/>Email me
</code>
Option 2: Make the link a block
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
.box a {
display: block;
}
<code class="box">
Contact: Email me
</code>
Just add width: 160px; for responsive use width: 40% or any value according to screen
.box {
width: 160px;
border: 1px dashed #540CE8;
}
Here is link JS FIDDLE
The bordered box is showing fine here, however everything seems broken as its trying to fit inside 'code' which is only 40px wide.
If you remove the width it seems to render fine.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: block;
height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
http://codepen.io/tomdurkin/pen/vOeLVb
This is how it comes out to me on fiddle: http://jsfiddle.net/jimmynewbs/j31dgz70/
see fiddle
The code you have specified as 40px wide, so the text is too big for that section.
I would suggest making the width larger, or removing the width and floating the element so that it will take the width of it's content...
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I don't understand. This is a very simple document and I can't see any reason it shouldn't work.
CSS:
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
display: table-cell;
vertical-align: middle;
height: 175px;
width: 175px;
text-decoration:none;
text-align: center;
word-wrap: break-word;
}
.button:hover {
text-decoration: underline;
}
.button p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
vertical-align:middle;
}
HTML:
<table>
<tr>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
</tr>
</table>
As far as I know, vertical-align was meant for use in td's, so I'm not sure why it isn't working.
Add below code to button css . Refer http://jsbin.com/kixewufe/2/ to view http://jsbin.com/kixewufe/2/edit?html,css,output to view complete code.
vertical-align:middle;
display:inherit;
The <td> content is indeed vertically-aligned. The problem is that the content is the <a> tag that is consuming all the available height and its own content (which is the <p> paragraph) is not vertically aligned.
Try to align the <a> tag as well:
.button {
display: table-cell;
vertical-align: middle;
}
Try using this code instead. It lays the button class over the text (which is vertical-align:middle;) and uses absolute positioning to position the button class on the table cell.
I apologize, I cannot add a jsfiddle at this time because they are experiencing some issues, however, if you copy - paste the code below you will see you get (what I believe is) your desired result.
HTML
<table>
<tr>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
</tr>
</table>
CSS
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
height: 175px;
width: 175px;
position:absolute;
top:0px;
left:0px;
}
td p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
text-align:center;
text-decoration:none;
width:170px;
margin-left:6px;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
position:relative;
width:180px;
height:180px;
vertical-align:middle;
}
Because none of these solutions worked for me, I found the following solution on StackOverflow. As far as I can tell this also works flawlessly with Bootstrap 4.
td {
display: flex;
align-items: center;
}
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}